举手投足前端第二弹:善用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” />
常规
注明文档使用的字符编码
|
|
该注脚用来指定文档的编码,除了utf-8
,可选值还有:ISO-8859-1、BIG5、iso-8859-2,
iso-2022-jp, iso-2022-kr, gb2312等
理所当然,你也许还见过使用其它一种办法来定义文档字符编码:
|
|
争执于这种方法,更推荐你使用第1种,言外之意,就是援引应用HTML5
。
扬言文档使用的字符编码
XHTML
<meta charset=”utf-8″ />
1
|
<meta charset="utf-8" />
|
该申明用来指定文档的编码,除了utf-8
,可选值还有:ISO-8859-1、BIG5、iso-8859-2,
iso-2022-jp, iso-2022-kr, gb2312等
本来,你可能还见过使用别的一种形式来定义文档字符编码:
XHTML
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″
/>
1
|
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
龃龉于那种方法,更推荐你采纳第1种,言外之意,就是推荐应用HTML5
。
扬言页面刷新或跳转
|
|
该表明用来指定页面自刷新或者跳转到其他页面,其中的年月单位是s
。
扬言页面刷新或跳转
XHTML
<meta http-equiv=”refresh” content=”10″ /> <meta
http-equiv=”refresh” content=”10; url=” />
1
2
|
<meta http-equiv="refresh" content="10" />
<meta http-equiv="refresh" content="10; url=http://www.doyoe.com" />
|
该声明用来指定页面自刷新或者跳转到其余页面,其中的时日单位是s
。
扬言页面过期时间
|
|
该注脚用来指定页面的逾期时间,一旦网页过期,从服务器上再一次请求,其中时间必须选择GMT
格式,或者直接是0
(即不缓存)
宣示页面过期时间
XHTML
<meta http-equiv=”expires” content=”0″ /> <meta
http-equiv=”expires” content=”Wed, 26 Feb 1997 08:21:57 GMT” />
1
2
|
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />
|
该评释用来指定页面的超时时间,一旦网页过期,从服务器上再次请求,其中时间必须利用GMT
格式,或者直接是0
(即不缓存)
宣称页面是还是不是缓存
|
|
上述讲话都能够用来指定文档不被缓存。一些依旧在应用HTTP/1.0的可以利用第1条,第2条由HTTP/1.1提供,常用值还有:public,
no-cache, no-store等
申明页面是还是不是缓存
XHTML
<meta http-equiv=”pragma” content=”no-cache” /> <meta
http-equiv=”cache-control” content=”no-cache” />
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
<meta name=”author” content=”joy, dooyoe@gmail.com” />
1
|
<meta name="author" content="joy, dooyoe@gmail.com" />
|
申明文档关键字
|
|
多紧要字之间以半角逗号分隔
扬言文档关键字
XHTML
<meta name=”keywords” content=”CSS, HTML, JavaScript, 前端” />
1
|
<meta name="keywords" content="CSS, HTML, JavaScript, 前端" />
|
多紧要字之内以半角逗号分隔
宣称文档描述
|
|
文档描述内容极其是完好的一句话,以不超越50个字符为宜
声称文档描述
XHTML
<meta name=”description” content=”这是一份meta列表” />
1
|
<meta name="description" content="这是一份meta列表" />
|
文档描述内容极其是整体的一句话,以不超过50个字符为宜
扬言使用的浏览器及版本
x-ua-compatible
安装是从IE8
发端增多的(很显然,只适用于IE),对于过往的本子不能甄别。
开发者可以经过设置x-ua-compatible
来指定渲染引擎的序列和本子,并且因为急需分裂足以有七种分裂的安装:
声称使用的浏览器及版本
x-ua-compatible
安装是从IE8
起来增多的(很分明,只适用于IE),对于过往的本子无法甄别。
开发者可以经过设置x-ua-compatible
来指定渲染引擎的门类和本子,并且因为急需分歧足以有各类不相同的安装:
Case1:
|
|
当直接指定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
<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″ />
1
2
3
4
|
<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:
|
|
当指定的content
值加了Emulate
前缀时,如上述代码,客户端IE将会根据Doctype定义来决定怎样来对页面进行渲染。假如页面使用了正规的Doctype,那么此概念效果等同Case1
;假使页面并从未运用正式的Doctype,那么将运用quirks mode
来渲染。
Case2:
XHTML
<meta http-equiv=”x-ua-compatible” content=”IE=EmulateIE7″ />
1
|
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" />
|
当指定的content
值加了Emulate
前缀时,如上述代码,客户端IE将会基于Doctype定义来控制怎样来对页面进行渲染。即使页面使用了专业的Doctype,那么此概念效果等同Case1
;假设页面并不曾接纳正式的Doctype,那么将应用quirks mode
来渲染。
Case3:
|
|
当指定的content
值为IE=Edge
时,如上述代码,客户端的IE将会使用最高的正统形式对页面举行渲染。
Case3:
XHTML
<meta http-equiv=”x-ua-compatible” content=”IE=Edge” />
1
|
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
|
当指定的content
值为IE=Edge
时,如上述代码,客户端的IE将会使用最高的正儿八经方式对页面进行渲染。
Case4:
|
|
当指定的content
值有多少个版本时,如上述代码,假定客户端IE版本为8.0要么9.0,则利用IE7.0标准形式对页面举行渲染;假定客户端IE版本为10.0依然11.0,则一贯利用相应版本的专业方式对页面举行渲染。
Case4:
XHTML
<meta http-equiv=”x-ua-compatible” content=”IE=7, 10, 11″ />
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:
|
|
当指定的content
值为IE=Edge, chrome=1
时,如上述代码,假定客户端安装了Google Chrome Frame
,则在IE中利用chrome的渲染引擎来渲染页面,否则,将会选用客户端IE最高的正式方式对页面举行渲染。
Case5:
XHTML
<meta http-equiv=”x-ua-compatible” content=”IE=Edge, chrome=1″ />
1
|
<meta http-equiv="x-ua-compatible" content="IE=Edge, chrome=1" />
|
当指定的content
值为IE=Edge, chrome=1
时,如上述代码,假定客户端安装了Google Chrome Frame
,则在IE中利用chrome的渲染引擎来渲染页面,否则,将会使用客户端IE最高的业内格局对页面举行渲染。
扬言搜索引擎抓取格局
|
|
通告搜索引擎文档是或不是须要被索引。可选值有:
- all(默许值,索引当前页并跟踪链接,相当于:index, follow)
- none(忽略当前页,相当于:noindex, nofollow)
- index(索引当前页)
- noindex(不索引当前页)
- follow(跟踪当前页链接,不论当前页是不是被索引)
- nofollow(不跟踪当前页链接,不论当前页是不是被索引)
万一申明争执,某些引擎可能会做严刻处理:
|
|
类似上述代码,在Google
引擎中,会执行noindex
这几个更加严谨的扬言。
急需小心的是并不是持有搜索引擎都协理robots meta
,相比较保守的做法是匹配robots.txt
使用。
宣称搜索引擎抓取格局
XHTML
<meta name=”robots” content=”index” />
1
|
<meta name="robots" content="index" />
|
文告搜索引擎文档是或不是必要被索引。可选值有:
- all(默许值,索引当前页并跟踪链接,相当于:index, follow)
- none(忽略当前页,相当于:noindex, nofollow)
- index(索引当前页)
- noindex(不索引当前页)
- follow(跟踪当前页链接,不论当前页是或不是被索引)
- nofollow(不跟踪当前页链接,不论当前页是不是被索引)
借使评释龃龉,某些引擎可能会做严刻处理:
XHTML
<meta name=”robots” content=”noindex” /> <meta name=”robots”
content=”index” />
1
2
|
<meta name="robots" content="noindex" />
<meta name="robots" content="index" />
|
接近上述代码,在Google
引擎中,会执行noindex
那些更是严苛的评释。
须要小心的是并不是具有搜索引擎都帮助robots meta
,比较保守的做法是同盟robots.txt
使用。
声明搜索引擎抓取间隔
|
|
突发性你或许并不指望站点向来被寻找引擎抓取,而是每间隔一段时间才来做客两遍,那时,可以表明revisit-after meta
。
宣称搜索引擎抓取间隔
XHTML
<meta name=”revisit-after” content=”10 days” />
1
|
<meta name="revisit-after" content="10 days" />
|
偶然你也许并不愿意站点向来被搜寻引擎抓取,而是每间隔一段时间才来拜访四次,那时,可以表明revisit-after meta
。
移动
移动
声明viewport视口
|
|
该注明用于指定在活动装备上页面的布局视口怎么样设置。对于viewport meta
的事无巨细设置,请参见:挪动前端第一弹:viewport详解
声明viewport视口
XHTML
<meta name=”viewport” content=”initial-scale=1, maximum-scale=1,
minimum-scale=1, user-scalable=no” />
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
来定义那一个名字,代码如下:
|
|
Android Chrome31.0
,Android Browser5.0
也起始援救添加到主屏幕了,但并不曾提供相应的定义标题的方法,所以如若您想统一iOS
和Android
阳台定义Web app
名称的主意,可以运用title
标签来定义,代码如下:
|
|
但如果你想要网页标题和App名字不雷同的话,那就只有iOS才行。
宣示添加到主显示器的Web App标题
iOS Safari
同意用户将一个网页添加到主显示器然后像App
一律来操作它。我们知道各类App
江湖都会有一个名字,iOS Safari
提供了一个私有的meta
来定义那几个名字,代码如下:
XHTML
<meta name=”apple-mobile-web-app-title” content=”Web App名称” />
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
无异于的变现,没有地址栏和情景栏全屏展现,代码如下:
|
|
该方案在 iOS
和 Android5.0+
上都通用。
表明添加到主显示屏时隐藏地址栏和状态栏(即全屏)
当我们将一个网页添加到主屏幕时,会更希望它能有像App
无异于的显示,没有地址栏和情景栏全屏显示,代码如下:
XHTML
<meta name=”apple-mobile-web-app-capable” content=”yes” />
1
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
该方案在 iOS
和 Android5.0+
上都通用。
声称添加到主显示器时设置系统顶栏颜色
当大家将一个网页添加到主屏幕时,仍可以对 系统显示手机信号、时间、电池的顶部状态栏
颜色举行安装,前提是敞开了:
|
|
有了那么些前提,你能够因此上面的办法来拓展定义:
|
|
content只有3个固定值可选:default | black | black-translucent
- 假诺设置为
default
,状态栏将为正规的,即白色,网页从气象栏以下开首显示; - 若果设置为
black
,状态栏将为灰色,网页从气象栏以下初阶突显; - 设若设置为
black-translucent
,状态栏将为粉红色半透明,网页将充满整个显示屏,状态栏会盖在网页之上;
该装置只在 iOS
上有效。
扬言添加到主屏幕时设置系统顶栏颜色
当我们将一个网页添加到主显示屏时,还足以对
系统显示手机信号、时间、电池的顶部状态栏
颜色举办安装,前提是敞开了:
XHTML
<meta name=”apple-mobile-web-app-capable” content=”yes” />
1
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
有了那些前提,你可以由此下边的艺术来开展定义:
XHTML
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”
/>
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
<meta name="format-detection" content="telephone=no" />
<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">
<meta name="format-detection" content="telephone=no" />
</div>
</div></td>
</tr>
</tbody>
</table>
- 打开拨打电话功效:
XHTML
<a href="tel:123456">123456</a>
<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">
<a href="tel:123456">123456</a>
</div>
</div></td>
</tr>
</tbody>
</table>
- 敞开发送短信功能:
XHTML
<a href="sms:123456">123456</a>
<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">
<a href="sms:123456">123456</a>
</div>
</div></td>
</tr>
</tbody>
</table>
在 Android
(iOS不会)上,浏览器会自动识别看起来像邮箱地址的字符串,不论有您从未拉长邮箱链接,当你在那几个字符串上长按,会弹出发邮件的升迁。
- 关闭邮箱地址识别:
XHTML
<meta name="format-detection" content="email=no" />
<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">
<meta name="format-detection" content="email=no" />
</div>
</div></td>
</tr>
</tbody>
</table>
- 拉开邮件发送:
XHTML
<a href="mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>
<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">
<a href="mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>
</div>
</div></td>
</tr>
</tbody>
</table>
- 倘使想同时关闭电话和信箱识别,可以把它们写到一条 meta
内,代码如下:
XHTML
<meta name="format-detection" content="telephone=no,email=no"
/>
<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">
<meta name="format-detection" content="telephone=no,email=no" />
</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 收藏
评论
附注
部分meta
概念来自于trip