【美高梅开户网址】挪动前端第二弹

移步前端第二弹:善用meta

2016/04/19 · CSS ·
Meta

原稿出处:
杜瑶(@doyoe)   

前言

meta是html语言head区的一个援救性标签。也许你以为那么些代码可有可无。其实只要您能够用好meta标签,会给你带来意料之外的机能,meta标签的机能有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并针对性新的页面,完毕网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页突显的窗口等!

前言

在举手投足前端第一弹:viewport详解中,大家讲了viewport,那是一个有关meta的故事。本次大家会就将meta其一故事讲得更宽广、更有意思一些。

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

转发的,这几个基本知识

前言

在挪动前端第一弹: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应用办法,只选用部分常用及实际意义比较大的谈话,当然也包蕴部分厂商私有定制的。

 

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

常规

参考:

常规

扬言文档使用的字符编码

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

<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

宣示页面刷新或跳转

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

该注明用来指定页面自刷新或者跳转到其它页面,其中的时刻单位是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

宣示页面过期时间

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

声称页面是不是缓存

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

扬言页面是不是缓存

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等

宣称小编音信

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

 

扬言作者音信

XHTML

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

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

表明文档关键字

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

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

 

宣示文档关键字

XHTML

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

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

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

宣称文档描述

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

文档描述内容极其是完整的一句话,以不当先50个字符为宜

x-ua-compatible 用来指定IE浏览器解析编译页面的model

扬言文档描述

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:
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定义。
当指定的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标准情势对页面举行渲染。

x-ua-compatible 头标签大小写不敏感,必须用在 head 中,必须在除 title
外的别样 meta 之前使用。

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定义。
当指定的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来渲染。

1、使用一行代码来指定浏览器采纳一定的文档情势。

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:
1
<meta http-equiv="x-ua-compatible" content="IE=Edge" />

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

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

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:
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,则一向动用相应版本的正统方式对页面进行渲染。

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

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:
1
<meta http-equiv="x-ua-compatible" content="IE=Edge, chrome=1" />

当指定的content值为IE=Edge, chrome=1时,如上述代码,假定客户端安装了Google Chrome Frame,则在IE中运用chrome的渲染引擎来渲染页面,否则,将会选拔客户端IE最高的业内格局对页面进行渲染。

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

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最高的科班格局对页面进行渲染。

扬言搜索引擎抓取方式

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

<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使用。

宣称搜索引擎抓取间隔

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

有时候你或许并不愿意站点一贯被搜寻引擎抓取,而是每间隔一段时间才来访问一回,这时,可以评释revisit-after meta

2、在一部分景况下,大家要求限制浏览器对文档的解析到某一特定版本,或者将浏览器限定到有些旧版本的表现中。可以用如下的办法:

表明搜索引擎抓取间隔

XHTML

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

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

偶然你可能并不期待站点一向被搜寻引擎抓取,而是每间隔一段时间才来做客三次,那时,能够评释revisit-after meta

移动

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

移动

声明viewport视口

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

该评释用于指定在活动装备上页面的布局视口怎么样设置。对于viewport meta的详实设置,请参见:举手投足前端第一弹:viewport详解

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

声明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来定义那个名字,代码如下:

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

 

Android Chrome31.0Android Browser5.0也开头扶助添加到主屏幕了,但并从未提供相应的定义题目的章程,所以只要您想统一iOSAndroid平台定义Web app名称的不二法门,可以采纳title标签来定义,代码如下:

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

 

但假如您想要网页标题和App名字不等同的话,那就唯有iOS才行。

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

宣称添加到主显示器的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一致的突显,没有地址栏和气象栏全屏呈现,代码如下:

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

 

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

 

扬言添加到主屏幕时隐藏地址栏和状态栏(即全屏)

当大家将一个网页添加到主屏幕时,会更愿意它能有像App一致的变现,没有地址栏和气象栏全屏突显,代码如下:

XHTML

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

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

该方案在 iOSAndroid5.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 上有效。

运用那种写法,浏览器如故采纳专业格局举办辨析,或者使用 IE5 Quirks
方式开展剖析。

宣示添加到主屏幕时设置系统顶栏颜色

当大家将一个网页添加到主屏幕时,还足以对
系统显示手机信号、时间、电池的顶部状态栏 颜色进行设置,前提是敞开了:

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. 关闭电话号码识别:

    1
    <meta name="format-detection" content="telephone=no" />
  2. 拉开拨打电话作用:

    1
    <a href="tel:123456">123456</a>
  3. 开启发送短信作用:

    1
    <a href="sms:123456">123456</a>

 

电话号码识别

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>

邮箱地址识别

在 Android (iOS不会)上,浏览器会自动识别看起来像邮箱地址的字符串,不论有您未曾拉长邮箱链接,当你在那个字符串上长按,会弹出发邮件的提醒。

  1. 闭馆邮箱地址识别:

    1
    <meta name="format-detection" content="email=no" />
  2. 打开邮件发送:

    1
    <a href="mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>
  3. 假如想同时关闭电话和信箱识别,可以把它们写到一条 meta 内,代码如下:

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

3、为了测试,大家也足以动用下面的口舌指定浏览器依据最高的正式形式解析页面。

附注

部分meta概念来自于trip

3 赞 10 收藏
评论

美高梅开户网址 2

附注

部分meta概念来自于trip

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

 

4、多少个形式的指定。大家得以用逗号分割七个版本,那种意况下,浏览器会从那些列表中接纳一个她所支持的最高版本来选取正式形式进行渲染。如上面的例子,在IE8举办浏览时,将会选择IE7的规范方式展开渲染,因为她本人不辅助IE9和IE10。

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

 

 

 

 

一行代码解决各个IE包容难点,IE6,IE7,IE8,IE9,IE10

2012-04-25 16:29:04| 分类: 学习 |字号 订阅
在网站开发中难免因为种种包容难点困扰,针对兼容难点,其实IE给出了缓解方案谷歌(Google)也交由驾驭决方案

百度也选用了那种方案去化解IE的包容难点

百度源代码如下

<!Doctype html>
<html xmlns=
xmlns:bd=;
<head>
<meta http-equiv=Content-Type content=“text/html;charset=utf-8″>
<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7>
<title>百度时而,你就清楚 </title>
<script>var wpo={start:new
Date*1,pid:109,page:‘superpage’}</script>
<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7>

可以打开百度,右键查看源码看下!大家得以看下文件头是不是留存这么一行代码!

那句话的意味是挟持行使IE7格局来分析网页代码!

在此间送上两种IE使用形式!

<meta http-equiv=“X-UA-Compatible” content=“IE=8″>

  1. 谷歌(Google) Chrome Frame也可以让IE用上Chrome的发动机:

<meta http-equiv=“X-UA-Compatible” content=“chrome=1″ />
3.强制IE8使用IE7形式来分析

<meta http-equiv=“X-UA-Compatible” content=“IE=EmulateIE7″><!–
IE7 mode –>
//或者
<meta http-equiv=“X-UA-Compatible” content=“IE=7″><!– IE7 mode
–>
4.强制IE8使用IE6或IE5形式来分析

<meta http-equiv=“X-UA-Compatible” content=“IE=6″><!– IE6 mode
–> 

<meta http-equiv=“X-UA-Compatible” content=“IE=5″><!– IE5 mode
–> 
5.要是一个特定版本的IE援救所必要的包容性方式多于一种,如:

<meta http-equiv=“X-UA-Compatible” content=“IE=5; IE=8″ />
二.设定网站服务器以指定预设包容性方式

万一服务器是团结的话,可以在服务器上定义一个自订标头来为它们的网站预设一个一定的文书兼容性情势。那几个一定的法门取决于你的网站服务器。

录入,下列的 web.config文件使Microsoft Internet Information Services
(IIS)能定义一个自订标头以自行使用IE7 mode来编译所有网页。

别的还有一头其余的化解方案,例如google的

ie7 –
js中是一个JavaScript库(解决IE与W3C标准的争论的JS库),使微软的Internet
Explorer的一颦一笑像一个Web标准卓殊的浏览器,帮忙更加多的W3C标准,扶助CSS2、CSS3选取器。它修复了好多的HTML和CSS难题,并使
得透明PNG在IE5、IE6下正确呈现。

使IE5,IE6兼容到IE7模式(推荐)

<!–[if lt IE 7]>
<script
src=”
type=”text/javascript”></script>
<![endif]–>
使IE5,IE6,IE7兼容到IE8模式

<!–[if lt IE 8]>
<script
src=”
type=”text/javascript”></script>
<![endif]–>
使IE5,IE6,IE7,IE8兼容到IE9模式

<!–[if lt IE 9]>
<script
src=”;
<![endif]–>
化解PNG突显难点

只需将透明png图片命名为*-trans.png

亟待专注的是:此格局对背景平铺(background-repeat)和背景(background-position)不可能起到其余意义,默许会占满整个容器。

转载:

三、<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″
/>
创制html5时发现这么一句话,不知其怎么样看头,百度如下:
如此那般写可以达到的机能是假如设置了GCF,则接纳GCF来渲染页面,假诺没设置GCF,则应用最高版本的IE内核举行渲染。谷歌Chrome
Frame(谷歌内嵌浏览器框架GCF)。那一个插件可以让用户的IE浏览器外不变,但用户在浏览网页时,实际上选拔的是GoogleChrome浏览器内核,而且扶助IE6、7、8等多少个本子的IE浏览器。

发表评论

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

网站地图xml地图