移动前端第二弹:善用meta

活动前端第二弹:善用meta

2016/04/19 · CSS ·
Meta

原稿出处:
杜瑶(@doyoe)   

前言

在移动前端第一弹:viewport详解中,我们讲了viewport,那是多个关于meta的传说。这一次大家会就将meta以此传说讲得更常见、越来越有趣一些。

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

meta列表

好的meta运用,能越来越好地拉长页面包车型客车可用性及被搜寻的可能率。

此地并不会列出全数的meta接纳办法,只选择部分常用及实际意义一点都不小的开口,当然也饱含一些厂家私有定制的。

 

常规

注解文书档案使用的字符编码

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

宣称页面刷新或跳转

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

宣称页面过期时间

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(即不缓存)

宣示页面是不是缓存

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, 前端" />

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

宣称文书档案描述

XHTML

<meta name=”description” content=”那是一份meta列表” />

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

文书档案描述内容非常是完好的一句话,以不超越肆21个字符为宜

声称使用的浏览器及版本

x-ua-compatible设置是从IE8千帆竞发扩充的(很刚强,只适用于IE),对于过往的本子不能分辨。
开荒者能够因此设置x-ua-compatible来钦命渲染引擎的类型和版本,何况因为供给不一足以有三种差异的装置:

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" />

当间接内定contentIE的某个具体版本,如上述代码第1条,顾客端的IE将会选用IE7.0标准格局对页面进行渲染,并忽略Doctype定义。
移动前端第二弹:善用meta。当钦命的IE版本在客户端IE中不设不常,IE将会尝试将该值调换为特别邻近的版本。
举个例子说内定四个荒谬的要么低于5.0的IE版本,如上述代码第2,3条,客商端的IE将会采纳IE5.0对页面举办渲染,由于IE5.0并不曾正式形式,所以将会直接选取quirks mode来渲染;
移动前端第二弹:善用meta。假如内定二个胜出客商端IE的版本,如上述代码第4条,假定顾客端IE的参天版本为9.0,那么IE会将该值调换为IE=9,即选择IE9.0规范方式对页面举办渲染。

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:

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:

XHTML

移动前端第二弹:善用meta。<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:

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

扬言搜索引擎抓取方式

XHTML

<meta name=”robots” content=”index” />

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

 

通报寻觅引擎文书档案是不是须要被索引。可选值有:

  • all(暗中认可值,索引当前页并追踪链接,相当于:index, follow)
  • none(忽略当前页,约等于:noindex, nofollow)
  • index(索引当前页)
  • 移动前端第二弹:善用meta。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使用。

声称找寻引擎抓取间隔

XHTML

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

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

一时你恐怕并不愿意站点一向被搜寻引擎抓取,而是每间隔一段时间才来访问一次,那时,能够证明revisit-after meta

移动

声明viewport视口

移动前端第二弹:善用meta。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来定义这几个名字,代码如下:

XHTML

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

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

Android Chrome31.0Android Browser5.0也发轫扶助增添到主显示器了,但并从未提供对应的定义题指标办法,所以一旦你想统一iOSAndroid阳台定义Web app名称的章程,能够选拔title标签来定义,代码如下:

XHTML

<title>Web App名称</title>

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

但如果您想要网页标题和App名字区别样的话,那就唯有iOS才行。

宣称增添到主显示器时掩饰地址栏和状态栏(即全屏)

当我们将贰个网页增添到主荧屏时,会更愿意它能有像App一样的表现,未有地址栏和状态栏全屏突显,代码如下:

XHTML

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

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

该方案在 iOSAndroid5.0+ 上都通用。

表明增添到主显示器时设置系统顶栏颜色

当大家将三个网页增添到主荧屏时,还能够对
系统显示手机信号、时间、电池的顶部状态栏 颜色实行安装,前提是翻开了:

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. 关门电话号码识别:
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>
  1. 开启拨打电话成效:
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>
  1. 敞开采送短信成效:
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不会)上,浏览器会自动识别看起来像邮箱地址的字符串,不论有你未曾拉长邮箱链接,当您在这些字符串上长按,会弹出发邮件的晋升。

  1. 闭馆邮箱地址识别:
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>
  1. 拉开邮件发送:
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>
  1. 设若想同期关闭电话和邮箱识别,能够把它们写到一条 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>

附注

部分meta概念来自于trip

3 赞 10 收藏
评论

图片 1

发表评论

电子邮件地址不会被公开。 必填项已用*标注