移动前端第二弹：善用meta

前言

在移动前端第一弹：viewport详解中，我们讲了viewport，那是一个关于meta的故事。这次我们会就将meta这个故事讲得更广阔、更有意思一些。

写过HTML的童鞋，应该都对这个不陌生，或用它来定义页面编码，或用它来定义搜索引擎抓取方式，或用它定义页面关键字，描述等等。

meta列表

好的meta使用，能更好地提高页面的可用性及被检索的几率。

这里并不会列出所有的meta使用方式，只挑选一些常用及实际意义比较大的讲讲，当然也包括一些厂商私有定制的。

常规

声明文档使用的字符编码

1
 
<meta charset="utf-8" />

该声明用来指定文档的编码，除了utf-8，可选值还有：ISO-8859-1、BIG5、iso-8859-2, iso-2022-jp, iso-2022-kr, gb2312等

当然，你可能还见过使用另外一种方式来定义文档字符编码：

1
 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

相对于这种方式，更推荐你使用第1种，言外之意，就是推荐使用HTML5。

声明页面刷新或跳转

12
 
<meta http-equiv="refresh" content="10" /><meta http-equiv="refresh" content="10; url=http://www.doyoe.com" />

该声明用来指定页面自刷新或者跳转到其它页面，其中的时间单位是s。

声明页面过期时间

12
 
<meta http-equiv="expires" content="0" /><meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />

该声明用来指定页面的过期时间，一旦网页过期，从服务器上重新请求，其中时间必须使用GMT格式，或者直接是0（即不缓存）

声明页面是否缓存

12
 
<meta http-equiv="pragma" content="no-cache" /><meta http-equiv="cache-control" content="no-cache" />

上述语句都可以用来指定文档不被缓存。一些仍然在使用HTTP/1.0的可以使用第1条，第2条由HTTP/1.1提供，常用值还有：public, no-cache, no-store等

声明作者信息

1
 
<meta name="author" content="joy, do[email protected]" />

声明文档关键字

1
 
<meta name="keywords" content="CSS, HTML, JavaScript, 前端" />

多关键字之间以半角逗号分隔

声明文档描述

1
 
<meta name="description" content="这是一份meta列表" />

文档描述内容最好是完整的一句话，以不超过50个字符为宜

声明使用的浏览器及版本

x-ua-compatible设置是从IE8开始增加的（很明显，只适用于IE），对于过往的版本无法识别。
开发者可以通过设置x-ua-compatible来指定渲染引擎的类型和版本，并且因为需求不同可以有多种不同的设置：

Case1:
1234
 
<meta http-equiv="x-ua-compatible" content="IE=7" /><meta http-equiv="x-ua-compatible" content="IE=4" /><meta http-equiv="x-ua-compatible" content="IE=xx" /><meta http-equiv="x-ua-compatible" content="IE=50" />

当直接指定content为IE的某个具体版本，如上述代码第1条，客户端的IE将会使用IE7.0标准模式对页面进行渲染，并忽略Doctype定义。
当指定的IE版本在客户端IE中不存在时，IE将会尝试将该值转换为最为接近的版本。
例如指定一个错误的或者低于5.0的IE版本，如上述代码第2，3条，客户端的IE将会使用IE5.0对页面进行渲染，由于IE5.0并没有标准模式，所以将会直接使用quirks mode来渲染；
如果指定一个大于客户端IE的版本，如上述代码第4条，假定客户端IE的最高版本为9.0，那么IE会将该值转换为IE=9，即使用IE9.0标准模式对页面进行渲染。

Case2:
1
 
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" />

当指定的content值加了Emulate前缀时，如上述代码，客户端IE将会根据Doctype定义来决定如何来对页面进行渲染。假设页面使用了标准的Doctype，那么此定义效果等同Case1；假设页面并没有使用标准的Doctype，那么将使用quirks mode来渲染。

Case3:
1
 
<meta http-equiv="x-ua-compatible" content="IE=Edge" />

当指定的content值为IE=Edge时，如上述代码，客户端的IE将会使用最高的标准模式对页面进行渲染。

Case4:
1
 
<meta http-equiv="x-ua-compatible" content="IE=7, 10, 11" />

当指定的content值有多个版本时，如上述代码，假定客户端IE版本为8.0或者9.0，则使用IE7.0标准模式对页面进行渲染；假定客户端IE版本为10.0或者11.0，则直接使用对应版本的标准模式对页面进行渲染。

Case5:
1
 
<meta http-equiv="x-ua-compatible" content="IE=Edge, chrome=1" />

当指定的content值为IE=Edge, chrome=1时，如上述代码，假定客户端安装了Google Chrome Frame，则在IE中使用chrome的渲染引擎来渲染页面，否则，将会使用客户端IE最高的标准模式对页面进行渲染。

声明搜索引擎抓取方式

1
 
<meta name="robots" content="index" />

通知搜索引擎文档是否需要被索引。可选值有：

  • all（默认值，索引当前页并跟踪链接，相当于：index, follow）
  • none（忽略当前页，相当于：noindex, nofollow）
  • index（索引当前页）
  • noindex（不索引当前页）
  • follow（跟踪当前页链接，不论当前页是否被索引）
  • nofollow（不跟踪当前页链接，不论当前页是否被索引）

如果声明冲突，某些引擎可能会做严格处理：

12
 
<meta name="robots" content="noindex" /><meta name="robots" content="index" />

类似上述代码，在Google引擎中，会执行noindex这个更为严格的声明。

需要注意的是并不是所有搜索引擎都支持robots meta，比较保守的做法是配合robots.txt使用。

声明搜索引擎抓取间隔

1
 
<meta name="revisit-after" content="10 days" />

有时候你可能并不希望站点一直被搜索引擎抓取，而是每间隔一段时间才来访问一次，这时，可以声明revisit-after meta。

移动

声明viewport视口

1
 
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

该声明用于指定在移动设备上页面的布局视口如何设置。对于viewport meta的详细设置，请参考：移动前端第一弹：viewport详解

声明添加到主屏幕的Web App标题

iOS Safari允许用户将一个网页添加到主屏幕然后像App一样来操作它。我们知道每个App下方都会有一个名字，iOS Safari提供了一个私有的meta来定义这个名字，代码如下：

1
 
<meta name="apple-mobile-web-app-title" content="Web App名称" />

Android Chrome31.0，Android Browser5.0也开始支持添加到主屏幕了，但并没有提供相应的定义标题的方式，所以如果你想统一iOS和Android平台定义Web app名称的方式，可以使用title标签来定义，代码如下：

1
 
<title>Web App名称</title>

但如果你想要网页标题和App名字不一样的话，那就只有iOS才行。

声明添加到主屏幕时隐藏地址栏和状态栏（即全屏）

当我们将一个网页添加到主屏幕时，会更希望它能有像App一样的表现，没有地址栏和状态栏全屏显示，代码如下：

1
 
<meta name="apple-mobile-web-app-capable" content="yes" />

该方案在 iOS 和 Android5.0+ 上都通用。

声明添加到主屏幕时设置系统顶栏颜色

当我们将一个网页添加到主屏幕时，还可以对 系统显示手机信号、时间、电池的顶部状态栏 颜色进行设置，前提是开启了：

1
 
<meta name="apple-mobile-web-app-capable" content="yes" />

有了这个前提，你可以通过下面的方式来进行定义：

1
 
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

content只有3个固定值可选：default | black | black-translucent

  • 如果设置为 default，状态栏将为正常的，即白色，网页从状态栏以下开始显示；
  • 如果设置为 black，状态栏将为黑色，网页从状态栏以下开始显示；
  • 如果设置为 black-translucent，状态栏将为灰色半透明，网页将充满整个屏幕，状态栏会盖在网页之上；

该设置只在 iOS 上有效。

电话号码识别

在 iOS Safari （其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：

  • 7位数字，形如：1234567
  • 带括号及加号的数字，形如：(+86)123456789
  • 双连接线的数字，形如：00-00-00111
  • 11位数字，形如：13800138000

可能还有其他类型的数字也会被识别，但在具体的业务场景中，有些时候这是不必须的，所以你可以关闭电话自动识别，然后在需要拨号的地方，开启电话呼出和短信功能。

  1. 关闭电话号码识别：

    1
    		 
    <meta name="format-detection" content="telephone=no" />
  2. 开启拨打电话功能：
    1
    		 
    <a href="tel:123456">123456</a>
  3. 开启发送短信功能：
    1
    		 
    <a href="sms:123456">123456</a>

邮箱地址识别

在 Android （iOS不会）上，浏览器会自动识别看起来像邮箱地址的字符串，不论有你没有加上邮箱链接，当你在这个字符串上长按，会弹出发邮件的提示。

  1. 关闭邮箱地址识别：

    1
    		 
    <meta name="format-detection" content="email=no" />
  2. 开启邮件发送：
    1
    		 
    <a href="mailto:[email protected]">[email protected]</a>
  3. 如果想同时关闭电话和邮箱识别，可以把它们写到一条 meta 内，代码如下：
    1
    		 
    <meta name="format-detection" content="telephone=no,email=no" />

附注

部分meta定义来自于trip

时间： 2024-12-19 18:08:15

移动前端第二弹：善用meta的相关文章

web前端-----第二弹CSS

web前端之CSS样式 CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. ''' selector { property: value; property: value; ... property: value } ''' 例如: h1 {color:red; font-size:14px;} css的四种引入方式 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. <p style="background-

深究angularJS系列 - 第二弹

深究angularJS系列 - 第二弹,在初步了解了Angular的基础上,进一步的针对Angular的控制器和作用域问题深入探究O(∩_∩)O~~ Angular控制器 控制器(Controller)的理解 控制器是对view的抽象,用来接收view的事件,响应view的请求: 控制器包含view的静态属性和动态的方法: 控制器与view是一对一的关系. 控制器(Controller)的结构 1 .controller("控制器的名字",function($scoppe){ 2 ..

C/C++中容器vector使用方法&lt;第二弹&gt;

此文总结常用vector操作,是前一篇的续作!只有代码,详细请看代码中的注释.出于反爬虫的目的,你不是在http://blog.csdn.net/zhanh1218上看到的,肯定不是最新最全的. /********************************************************************* * file_name: vector_test.cpp * * Created on: 2014年6月28日 下午3:34:23 * Author: The_T

移动前端工作的那些事---前端制作篇之meta标签篇

移动端前端制作有些地方不同于互联网,这篇主要讨论的是meta标签.meta标签位于head标签之间.是主要辅助HTML结构层的.meta标签不管在互联网前端还是在移动端都起了很重要的作用.这里只讨论移动端. 附上代码进行说明: <!DOCTYPE html><!--HTML5 doctype--> <html> <head> <title>xxx</title> <meta http-equiv="Content-ty

日均百万PV架构第二弹(缓存时代来临)

上一弹中我们规划并搭建了基本的架构组成,当然此架构存在诸多问题,我们在接下来的章节中将不断 完善其功能特性,使之成为实至名归的百万PV架构站点   首先来对上一弹架构做基本的ab 并发100, 总量2000的测试,让我们对站点性能有所熟知,之后在之前的功能上我们添加多道 缓存对性能进行提升. (ps: 测试机器均为虚拟机环境 , 大约性能比主流服务器低 2.5 - 3.5 倍 , 测试参 数可做此对比评估) 按照规划,我们在salve3.king.com中添加两实例的varnish,在slave

《我与希乐仑》第二弹

致徐敏: 如果你觉得我的这篇报道侵害了你和贵公司的权益,你可以上法院告我,但我说的都是事实,不怕你告,有事找我律师,谢谢! 我是希乐仑科技发展(上海)有限公司前员工,曾经为希乐仑立下汗马功劳.这公司从2014年2月份开始搞我,我去年的绩效是3.8/5.0,完全没有绩效问题.他们倒好,自从我查完我们公司某商业间谍之后,就给我穿小鞋,说我这个不好,那个拖延,这不是扯淡吗?公司在3月5日非法把我裁掉,而且直到现在还未支付我2月份工资,行吧,那我就不再沉默了,当我吃素的是吧!我现在把这件事情公之于众,望

线段树第二弹（区间更新）

上篇文章,我们介绍了线段树的基本概念和单点更新.区间查询,今天,我们来接着上次的线段树问题继续深入研究.在解决线段树问题的过程中,我们会遇到要求修改区间中某一元素值的问题,当然也可能会遇到要求修改一段子区间所有值的问题--即区间更新问题.回忆一下上篇文章单点更新的方法是,由叶节点逐级向上进行更新,此时更新一个节点值的时间复杂度为o(log n),(点击链接了解详情:线段树+RMQ问题第二弹),那么以这样的处理效率来进行区间更新结果会怎样?现在假设待更新区间数据的规模为 n ,那么就需要进行 n

MongoDB第二弹——基本操作

1 查看各个项目的Project ID编号 mysql -uroot -h10.10.2xx.xx show databases; use bugfree2; desc bf_TestProject; select ProjectID,ProjectName from bf_TestProject;(查询结果如下) 2 在/var/www/html/bugfree/BugFile路径下创建文件夹 mkdir Project2  Project3  Project4  Project5  Proj

黑马程序员:赶紧下载iOS10开发教程第二弹

虽然6月13日WWDC2016的发布会结束了,但是本届大会的开发者session环节还在持续进行着.黑马程序员本着对技术的狂热,对学生负责的态度,仍然坚持每天对课程进行深入的研发.本文主要是黑马程序员对iOS 10 中SDK所更新的主要内容进行总结.根据黑马程序员惯例,在文章的最后,有相关相关教学视频及Demo会有分享链接,供各位下载! 1.Grand Center Dispatch GCD 在本次一更新主要有以下内容: ?创建私有队列 ?安排异步执行的工作项目(items) ?GCD能自动将工