举手投足前端第二弹：善用meta

2016/04/19 · CSS ·
Meta

初稿出处：
杜瑶（@doyoe）

前言

meta是html语言head区的一个扶助性标签。也许你觉得这几个代码可有可无。其实假若你可以用好meta标签，会给您带来意料之外的意义，meta标签的法力有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并对准新的页面，达成网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页突显的窗口等！

前言

在挪动前端第一弹：viewport详解中，我们讲了viewport，那是一个有关meta的故事。本次大家会就将meta那一个故事讲得更宽广、更幽默一些。

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

Meta标签是HTML语言head区的一个接济性标签，它座落HTML文档底部的head标记和title标记之间，它提供用户不可见的新闻。它可用以浏览器（如何浮现内容或重复加载页面），搜索引擎（关键词），或其余web服务。
　　我现将前端页面开发常常使用的meta标签内容整理成文，参加了运动端web开发meta音信，供要求时翻看。

前言

在挪动前端第一弹：viewport详解中，大家讲了viewport，这是一个有关meta的故事。本次大家会就将meta活动前端第二弹。以此故事讲得更宽泛、更好玩一些。

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

http-equiv属性

来得字符集的设定

<meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″>

<meta http-equiv=”Content-Language” content=”zh-CN”>

说明：用于评释主页制作所采纳的文字以及语言；又如英文是ISO-8859-1字符集，还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集；

Refresh （刷新）

<meta http-equiv=”Refresh” content=”n; url=;

说明：定时让网页在指定的年月n内，跳转到你的页面；

Expires （期限）

<meta http-equiv=”Expires” content=”Mon,12 May 2001 00:20:00
GMT”>

说明：可以用于设定网页的到期时间，一旦过期则必须到服务器上再一次调用。必要注意的是必须拔取GMT时间格式；

Pragma （cach模式）

<meta http-equiv=”Pragma” content=”no-cache”>

说明：是用以设定禁止浏览器从本地机的缓存中调阅页面内容，设定后如若偏离网页就不能够从Cache中再调出；

Set-Cookie （cookie设定)

<meta http-equiv=”set-cookie” content=”Mon,12 May 2001 00:20:00
GMT”>

说明：cookie设定，固然网页过期，存盘的cookie将被去除。须求小心的也是必须采取GMT时间格式；

Pics-label （网页RSAC等级鉴定）

<meta http-equiv=”Pics-label” content=””>

说明：网页等级评定，在IE的internet选项中有一项内容设置，可避防患浏览部分受限制的网站，而网站的限制级别就是经过meta属性来设置的；

Window-target （展现窗口的设定）

<meta http-equiv=”windows-Target” content=”_top”>

说明：强制页面在方今窗口中以单独页面突显，可以幸免投机的网页被旁人作为一个frame页调用；

Page-Enter、Page-Exit （进入与脱离）

<meta http-equiv=”Page-Enter”
content=”revealTrans（duration=10,transition= 50）”>

<meta http-equiv=”Page-Exit”
content=”revealTrans（duration=20，transition=6）”>

说明：设定进入和离开页面时的特殊效果，那个效能即FrontPage中的”格式/网页过渡”，不过所加的页面不可见是一个frame页面。

宣示使用的浏览器及版本

x-ua-compatible设置是从IE8初阶伸张的（很显眼，只适用于IE），对于过往的版本无法辨别。开发者可以因而设置x-ua-compatible来指定渲染引擎的项目和版本，并且因为必要不一足以有多样差别的安装。当直接指定content为IE的某个具体版本，如上述代码第1条，客户端的IE将会动用IE7.0标准格局对页面进行渲染，并忽略Doctype定义。当指定的IE版本在客户端IE中不设有时，IE将会尝试将该值转换为无限接近的本子。例如指定一个稍低于5.0的IE版本，如上述代码第2条，客户端的IE将会动用IE5.0对页面举办渲染，由于IE5.0并从未正儿八经情势，所以将会直接使用quirks
mode来渲染；倘诺指定一个超出客户端IE的本子，如上述代码第3条，假定客户端IE的最高版本为9.0，那么IE会将该值转换为IE=9，即拔取IE9.0标准格局对页面举办渲染。

<meta http-equiv=”x-ua-compatible” content=”IE=7″/>

<meta http-equiv=”x-ua-compatible” content=”IE=4″/>

当指定的content值加了Emulate前缀时，如上述代码，客户端IE将会根据Doctype定义来支配哪些来对页面举行渲染。如若页面使用了业内的Doctype，那么此概念效果等同地点的情形；即使页面并没有利用正式的Doctype，那么将应用quirks
mode来渲染。

<meta http-equiv=”x-ua-compatible” content=”IE=EmulateIE7″/>

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

<meta http-equiv=”x-ua-compatible” content=”IE=Edge”/>

当指定的content值有多个版本时，如上述代码，假定客户端IE版本为8.0或者9.0，则采纳IE7.0标准方式对页面进行渲染；假定客户端IE版本为10.0要么11.0，则平昔使用相应版本的正统格局对页面举行渲染。

<meta http-equiv=”x-ua-compatible” content=”IE=7, 10, 11″/>

当指定的content值为IE=Edge,
chrome=1时，如上述代码，假定客户端安装了谷歌（Google） Chrome
Frame，则在IE中选取chrome的渲染引擎来渲染页面，否则，将会动用客户端IE最高的正规方式对页面举行渲染。

<meta http-equiv=”x-ua-compatible” content=”IE=Edge,
chrome=1″/>

meta列表

好的meta运用，能更好地升高页面的可用性及被搜寻的几率。

那里并不会列出装有的meta应用格局，只采取部分常用及实际意义比较大的发话，当然也席卷一些厂商私有定制的。

1、注脚文档使用的字符编码<meta charset=’utf-8′> 　或
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
　　该 meta 标签定义了 HTML 页面所选用的字符集为 utf-8
，就是万国码。它可以在同一页面展现中文简体、繁体及任何语言（如日文，斯拉维尼亚语）等。当然，你也可以动用gb2312（简体粤语），big5（繁体汉语）等等其余字符集。
　　而眼下我们一般推荐应用第一种写法，也是HTML5使用的写法。

meta列表

好的meta选择，能更好地拉长页面的可用性及被寻找的几率。

此地并不会列出富有的meta运用格局，只选择部分常用及实际意义相比较大的出口，当然也包涵部分厂商私有定制的。

name属性

关键词

<Meta name=”Keywords”
Content=”关键词1,关键词2，关键词3,关键词4,……”>

说明：为寻找引擎提供的最首要字

Description (简介)

<Meta name=”Description” Content=”你网页的简述”>

说明：Description用来报告搜索引擎你的网站显要内容

罗布ots (机器人向导)

亚洲必赢官网 ，<Meta name=”Robots”
Content=”All|None|Index|Noindex|Follow|Nofollow”>

说明：罗布ots用来告诉搜索机器人怎么样页面要求索引，哪些页面不需求索引。Content的参数有all、none、index、noindex、follow、nofollow。默认是all。

all：文件将被寻找，且页面上的链接能够被询问；

none：文件将不被搜寻，且页面上的链接不可以被询问；(和 “noindex, no
follow” 起相同效果)

index：文件将被搜寻；（让robot/spider登录）

follow：页面上的链接可以被询问；转自环球网校edu24ol.com转自环球
网校edu24ol.com转自环球网校edu24ol.com

noindex：文件将不被寻找，但页面上的链接可以被询问；(不让robot/spider登录)

nofollow：文件将不被搜寻，页面上的链接可以被询问。(不让robot/spider顺着此页的接连往下探找)

作者

<Meta name=”Author” Content=”张三，abc@sina.com”>

说明：标明网页的撰稿人或制作组

Generator (编辑器)

<Meta name=”Generator” Content=”PCDATA|FrontPage|”>

讲明：编辑器的认证注意：Content=”你所用编辑器”

revisit-after (重访)

<META name=”revisit-after” CONTENT=”7 days”>

常规

2、评释使用的浏览器及版本
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
　　当指定的content值为IE=edge,chrome=1时，优先利用 IE 最新版本和
Chrome。假定客户端安装了谷歌（Google） Chrome
Frame，则在IE中采用chrome的渲染引擎来渲染页面，否则，将会利用客户端IE最高的正式情势对页面进行渲染。
　　还有以下二种设置方法：
<meta http-equiv=”X-UA-Compatible” content=”IE=6″ /> <meta
http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ /> <meta
http-equiv=”X-UA-Compatible” content=”IE=8″ /> <meta
http-equiv=”X-UA-Compatible” content=”IE=edge” />
　3、SEO优化相关
　　页面描述，每个网页都应有一个不当先 150
个字符且能规范反映网页内容的讲述标签。
<meta name=”description” content=”不超过150个字符” />
　　页面关键词，每个网页应持有描述该网页内容的一组唯一的要害字。
　　使用人们也许会寻找，并规范描述网页上所提供音信的描述性和代表性关键字及短语。
<meta name=”keywords” content=”html5, css3, 关键字”/>
　　定义网页小编，非须要
<meta name=”author” content=”月光光” />
　4、页面重定向和刷新：content内的数字代表时间（秒），既多少时间后刷新。即使加url,则会重定向到指定网页。
<meta http-equiv=”Refresh” contect=”5;url=”
/>
　　上述代码表示停留5分钟后活动刷新跳转到URL网址http://www.admin10000.com。
　5、Expires网页过期时间
<meta http-equiv=”Expires” contect=”Mon,12 May 2016 00:20:00 GMT”
/>
　　设定网页的到期时间，一旦过期则必须到服务器上再次调用，需求小心的是必须利用GMT时间格式，或直接设为0(不缓存)。
　6、Pragma禁止本地缓存
<meta http-equiv=”Pragma” contect=”no-cache” />
　　设定网页不保存在缓存中，每一回访问都刷新页面。那样设定，访问者将无法脱机浏览。
　7、viewport移动设备屏幕可视区域
　　由于移动设备显示屏宽度不一致于传统 web，由此大家要求转移 viewport 值。
　　大多数4.7-5寸设备的viewport宽设为360px；5.5寸设备设为400px；iphone6设为375px；ipone6
plus设为414px。
　　width – viewport 的宽度（范围从 200 到 10,000，默认为 980 像素）
　　height – viewport 的高度（范围从 223 到 10,000 ）
　　initial-scale – 开始的缩放比例（范围从 > 0 到 10）
　　minimum-scale – 允许用户缩放到的细微比例
maximum-scale – 允许用户缩放到的最大比例
　　user-scalable – 用户是或不是足以手动缩放 (no，yes)
<meta name=”viewport” content=”width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no” />
　　强制让文档与设备的小幅保持 1:1 ；
　　文档最大的幅度比列是1.0（ initial-scale 开端刻度值和 maximum-scale
最大刻度值）；
　　user-scalable 定义用户是不是足以手动缩放（ no
为不缩放），使页面固定设备上面的轻重缓急；
　　注意：实际测试中窥见，有些安卓系统自带的浏览器并不接济这一条规则，可以对页面举办推广，一旦松开响应的
box 也随着加大，导致页面出现混乱难点，解决措施：定义页面的蝇头宽度。
body { min-width: 320px; }
　　注意，很多少人采纳initial-scale=1到非响应式网站上，那会让网站以100%宽度渲染，用户须要手动移动页面或者缩放。假设和initial-scale=1同时采取user-scalable=no或maximum-scale=1，则用户将无法松开/减少网页来察看整个的情节。
　　对于运动装备上的meta还有以下一些设置。
　　8、WebApp全屏格局：伪装app，离线应用。
<meta name=”apple-mobile-web-app-capable” content=”yes” />
　　9、隐藏状态栏/设置情状栏颜色：唯有在开启WebApp全屏格局时才生效。content的值为default
| black | black-translucent 。
<meta name=”apple-mobile-web-app-status-bar-style”
content=”black-translucent” />
　　10、添加到主屏后的标题
<meta name=”apple-mobile-web-app-title” content=”标题” />
　　11、忽略数字自动识别为电话号码
<meta content=”telephone=no” name=”format-detection” />
　　12、忽略识别邮箱
<meta content=”email=no” name=”format-detection” />

常规

注明文档使用的字符编码

`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。

扬言文档使用的字符编码

XHTML

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

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

本来，你可能还见过使用别的一种形式来定义文档字符编码：

XHTML

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

龃龉于那种方法，更推荐你采纳第1种，言外之意，就是推荐应用HTML5。

扬言页面刷新或跳转

1
2

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

该表明用来指定页面自刷新或者跳转到其他页面，其中的年月单位是s。

扬言页面刷新或跳转

XHTML

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

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

扬言页面过期时间

1
2

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

该注脚用来指定页面的逾期时间，一旦网页过期，从服务器上再一次请求，其中时间必须选择GMT格式，或者直接是0（即不缓存）

宣示页面过期时间

XHTML

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

该评释用来指定页面的超时时间，一旦网页过期，从服务器上再次请求，其中时间必须利用GMT格式，或者直接是0（即不缓存）

宣称页面是还是不是缓存

1
2

<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等

申明页面是还是不是缓存

XHTML

1 2	<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, dooyoe@gmail.com" />`

扬言小编消息

XHTML

1	<meta name="author" content="joy, dooyoe@gmail.com" />

申明文档关键字

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

多紧要字之间以半角逗号分隔

扬言文档关键字

XHTML

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

多紧要字之内以半角逗号分隔

宣称文档描述

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

文档描述内容极其是完好的一句话，以不超越50个字符为宜

声称文档描述

XHTML

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

文档描述内容极其是整体的一句话，以不超过50个字符为宜

扬言使用的浏览器及版本

x-ua-compatible安装是从IE8发端增多的（很显然，只适用于IE），对于过往的本子不能甄别。
开发者可以经过设置x-ua-compatible来指定渲染引擎的序列和本子，并且因为急需分裂足以有七种分裂的安装：

声称使用的浏览器及版本

x-ua-compatible安装是从IE8起来增多的（很分明，只适用于IE），对于过往的本子无法甄别。
开发者可以经过设置x-ua-compatible来指定渲染引擎的门类和本子，并且因为急需分歧足以有各类不相同的安装：

Case1:

<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标准情势对页面进行渲染。

Case1:

XHTML

当直接指定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来渲染。

Case2:

XHTML

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将会使用最高的正统形式对页面举行渲染。

Case3:

XHTML

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，则一贯利用相应版本的专业方式对页面举行渲染。

Case4:

XHTML

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最高的正式方式对页面举行渲染。

Case5:

XHTML

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（不跟踪当前页链接，不论当前页是不是被索引）

万一申明争执，某些引擎可能会做严刻处理：

1
2

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

类似上述代码，在Google引擎中，会执行noindex这几个更加严谨的扬言。

急需小心的是并不是持有搜索引擎都协理robots meta，相比较保守的做法是匹配robots.txt使用。

宣称搜索引擎抓取格局

XHTML

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

文告搜索引擎文档是或不是必要被索引。可选值有：

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

借使评释龃龉，某些引擎可能会做严刻处理：

XHTML

1 2	<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。

宣称搜索引擎抓取间隔

XHTML

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详解

声明viewport视口

XHTML

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才行。

宣示添加到主显示器的Web App标题

iOS Safari同意用户将一个网页添加到主显示器然后像App一律来操作它。我们知道各类App江湖都会有一个名字，iOS Safari提供了一个私有的meta来定义那几个名字，代码如下：

XHTML

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

Android Chrome31.0，Android Browser5.0也起首帮忙添加到主显示屏了，但并没有提供对应的概念标题的主意，所以一旦你想统一iOS和Android阳台定义Web app名称的措施，可以动用title标签来定义，代码如下：

XHTML

<title>Web App名称</title>

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

但借使您想要网页标题和App名字分裂的话，那就只有iOS才行。

扬言添加到主显示屏时隐藏地址栏和状态栏（即全屏）

当大家将一个网页添加到主屏幕时，会更期望它能有像App无异于的变现，没有地址栏和情景栏全屏展现，代码如下：

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

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

表明添加到主显示屏时隐藏地址栏和状态栏（即全屏）

当我们将一个网页添加到主屏幕时，会更希望它能有像App无异于的显示，没有地址栏和情景栏全屏显示，代码如下：

XHTML

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 上有效。

扬言添加到主屏幕时设置系统顶栏颜色

当我们将一个网页添加到主显示屏时，还足以对
系统显示手机信号、时间、电池的顶部状态栏 颜色举办安装，前提是敞开了：

XHTML

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

有了那些前提，你可以由此下边的艺术来开展定义：

XHTML

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`	`<meta name="format-detection" content="telephone=no" />`

敞开拨打电话作用：
1
<a href="tel:123456">123456</a>
翻开发送短信功效：
1
<a href="sms:123456">123456</a>

电话号码识别

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

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

兴许还有其它类其他数字也会被辨认，但在具体的事务场景中，有些时候那是不必须的，所以您可以关闭电话自动识别，然后在须求拨号的地方，开启电话呼出和短信功用。

关闭电话号码识别：

XHTML

&lt;meta name="format-detection" content="telephone=no" /&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d0d262c9918702199-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d0d262c9918702199-1" class="crayon-line">
&lt;meta name=&quot;format-detection&quot; content=&quot;telephone=no&quot; /&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

打开拨打电话功效：

XHTML

&lt;a href="tel:123456"&gt;123456&lt;/a&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d0d262cc287691951-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d0d262cc287691951-1" class="crayon-line">
&lt;a href=&quot;tel:123456&quot;&gt;123456&lt;/a&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

敞开发送短信功能：

XHTML

&lt;a href="sms:123456"&gt;123456&lt;/a&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d0d262cf285203593-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d0d262cf285203593-1" class="crayon-line">
&lt;a href=&quot;sms:123456&quot;&gt;123456&lt;/a&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

在 Android
（iOS不会）上，浏览器会自动识别看起来像邮箱地址的字符串，不论有您从未拉长邮箱链接，当你在那几个字符串上长按，会弹出发邮件的升迁。

关闭邮箱地址识别：

XHTML

&lt;meta name="format-detection" content="email=no" /&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d0d262d2121807146-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d0d262d2121807146-1" class="crayon-line">
&lt;meta name=&quot;format-detection&quot; content=&quot;email=no&quot; /&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

拉开邮件发送：

XHTML

&lt;a href="mailto:dooyoe@gmail.com"&gt;dooyoe@gmail.com&lt;/a&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d0d262d5072414295-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d0d262d5072414295-1" class="crayon-line">
&lt;a href=&quot;mailto:dooyoe@gmail.com&quot;&gt;dooyoe@gmail.com&lt;/a&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

倘使想同时关闭电话和信箱识别，可以把它们写到一条 meta
内，代码如下：

XHTML

&lt;meta name="format-detection" content="telephone=no,email=no"
/&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d0d262d8257433028-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d0d262d8257433028-1" class="crayon-line">
&lt;meta name=&quot;format-detection&quot; content=&quot;telephone=no,email=no&quot; /&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

邮箱地址识别

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

关门邮箱地址识别：

`1`	`<meta name="format-detection" content="email=no" />`

拉开邮件发送：

`1`	`<a href="mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>`

假诺想同时关闭电话和邮箱识别，可以把它们写到一条 meta 内，代码如下：
1
<meta name="format-detection" content="telephone=no,email=no" />

附注

部分meta概念来自于trip

3 赞 10 收藏
评论

亚洲必赢官网 1

附注

部分meta概念来自于trip

举手投足前端第二弹：善用meta

前言

前言

前言

http-equiv属性

meta列表

meta列表

name属性

常规

常规

注明文档使用的字符编码

扬言文档使用的字符编码

扬言页面刷新或跳转

扬言页面刷新或跳转

扬言页面过期时间

宣示页面过期时间

宣称页面是还是不是缓存

申明页面是还是不是缓存

宣示小编信息

扬言小编消息

申明文档关键字

扬言文档关键字

宣称文档描述

声称文档描述

扬言使用的浏览器及版本

声称使用的浏览器及版本

Case1:

Case1:

Case2:

Case2:

Case3:

Case3:

Case4:

Case4:

Case5:

Case5:

扬言搜索引擎抓取格局

宣称搜索引擎抓取格局

声明搜索引擎抓取间隔

宣称搜索引擎抓取间隔

移动

移动

声明viewport视口

声明viewport视口

宣示添加到主屏幕的Web App标题

宣示添加到主显示器的Web App标题

扬言添加到主显示屏时隐藏地址栏和状态栏（即全屏）

表明添加到主显示屏时隐藏地址栏和状态栏（即全屏）

声称添加到主显示器时设置系统顶栏颜色

扬言添加到主屏幕时设置系统顶栏颜色

电话号码识别

电话号码识别

邮箱地址识别

附注

附注

相关文章