网页中head之间meta标签应该如何写?降龙十八掌之第四掌HTML(兼容篇)

09. November 2016 HTML5 0

第一:<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />

这行代码是必要的,X-UA-Compatible是IE8的一个专有<meta>属性,它告诉IE8采用何种IE版本去渲染网页,IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame。

特别说明“IE=edge是“以最高级别的可用模式显示内容”,和不设置是不一样的。有些因素会自动触发兼容性文档视图,这个时候设置X-UA-Compatible就可以防止这个自动触发的行为。
默认行为大致有这些:
存在于注册表中的兼容性视图列表,当url匹配时将自动切换到兼容性视图
在注册表中的对应字段指定了使用兼容性视图来显示所有网站
未指定DOCTYPE,则使用Quirks模式
曾经遇到过错误。

至于chrome=1,若在IE安装了GCF,默认首先使用GCF进行渲染。Google Chrome Frame(谷歌内嵌浏览器框架GCF)。这个插件可以让用户的IE浏览器外不变,但用户在浏览网页时,实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器,虽然这个插件目前用的很少了,但是万一呢,加上更严谨。

 

第二:<meta name=”renderer” content=”webkit|ie-comp|ie-stand”> 目前针对于360浏览器

content的取值为webkit,ie-comp,ie-stand之一,区分大小写,分别代表用webkit内核,IE兼容内核,IE标准内核。
若页面需默认用极速核,增加标签:<meta name=”renderer” content=”webkit”>
若页面需默认用ie兼容内核,增加标签:<meta name=”renderer” content=”ie-comp”>
若页面需默认用ie标准内核,增加标签:<meta name=”renderer” content=”ie-stand”>

这个meta标签主要针对于360浏览器,这方面360浏览器相比国内其他浏览器做的很棒哦,点赞!如果360开放强制使用极速内核接口就更好了。国内双核浏览器,是IE内核和webkit,在360浏览器中,360官网,淘宝,天猫等网站都只能运行在极速模式,没有注意到的小伙伴们可以试试哦,这个功能好像得和360合作。

文档地址http://se.360.cn/v6/help/meta.html

 

第三:<meta name=”viewport” content=”width=device-width, initial-scale=1″>

移动设备上的viewport分为layout viewport  、 visual viewport   ideal viewport  三类,其中的ideal viewport是最适合移动设备的viewport,ideal viewport的宽度等于移动设备的屏幕宽度。

width 设置layout viewport  的宽度,为一个正整数,或字符串”width-device”
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置layout viewport  的高度,这个属性对我们并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为”no”或”yes”, no 代表不允许,yes代表允许

<meta name=”viewport” content=”width=device-width”>和<meta name=”viewport” content=”initial-scale=1″>效果是一样的,若两个属性发生冲突,浏览器会选择最大的那个。

每个移动设备浏览器中都有一个理想的宽度,这个理想的宽度是指css中的宽度,跟设备的物理宽度没有关系,在css中,这个宽度就相当于100%的所代表的那个宽度。

css中的1px并不等于设备的1px

在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素。但实际情况却并非如此,css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中,我们无需对这个津津计较,但在移动设备上,必须弄明白这点。

css中的1px并不是代表屏幕上的1px,你分辨率越大,css中1px代表的物理像素就会越多,devicePixelRatio的值也越大,这很好理解,因为你分辨率增大了,但屏幕尺寸并没有变大多少,必须让css中的1px代表更多的物理像素,才能让1px的东西在屏幕上的大小与那些低分辨率的设备差不多,不然就会因为太小而看不清。

总结一句话使用

<meta name="viewport" content="width=device-width, initial-scale=1">

来得到一个理想的viewport(也就是前面说的ideal viewport)。

 

第四:html5shiv.js和respond.min.js

<!–[if lt IE 9]>
<script src=”http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.js”></script>
<script src=”http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js”></script>
<![endif]–>

<!–[if lt IE 9]> <![endif]–>其他浏览器会将其作为注释而忽略这些语句,因为他们是IE专门提供的一种语法,如此就能根据不同的IE版本加载对应的CSS或者JS文件了。

<!–[if !IE]><!–> 除IE外都可识别 <!–<![endif]–>
<!–[if IE]> 所有的IE可识别 <![endif]–>
<!–[if IE 6]> 仅IE6可识别 <![endif]–>
<!–[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]–>
<!–[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]–>
<!–[if IE 7]> 仅IE7可识别 <![endif]–>
<!–[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]–>
<!–[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]–>
<!–[if IE 8]> 仅IE8可识别 <![endif]–>
<!–[if IE 9]> 仅IE9可识别 <![endif]–>

html5shiv.js 用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题。所以我们在使用过程中,想要让低版本的浏览器,即IE9以下的浏览器支持,html5shiv.js是一个非常棒的选择。

respond.min.js 让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。在css的后面引入越早,在ie下面看到页面闪屏的概率就越低,因为最初css会先渲染出来,如果respond.js加载得很后面,这时重新根据media query解析出来的css会再改变一次页面的布局等,所以看起来有闪屏的现象。

优点:压缩后仅1k,不跨域时性能ok,只需引入respond.js通用易用

缺点:仅支持media query的min-width和max-width(用于响应式够用)

总结下,说了那么多,把以下代码复制到自己的网页中,完事。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<meta name="renderer" content="webkit">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

firefox_ie

第五:<!– saved from url=(0014)about:internet –>

我们在网站开发中,有些需要兼容IE8以下的浏览器,那么问题就来了,在IE浏览器中,当运行JS文件的时候,经常有提示,如“Internet Explorer 已限制网页运行脚本或ActiveX控件”,“为了有利于保护安全性,Internet Explorer己限制此网页进行可以访问计算机的脚本或ActiveX控件。请单击这里获取选项”,这些提示真的很讨人厌,虽然可以在IE浏览器中设置,打开工具——Internet选项–>高级 找到”允许活动内容在我的计算机上的文件中运行” 打上勾,确定。重启IE,然而我们不能要求用户去设置浏览器来适合我们网页,那么我们开发人员就只能上代码啦!

在<!DOCTYPE html”>下面添加下面一句话
<!– saved from url=(0014)about:internet –>

搞定!关闭浏览器重新打开试试。

官方解释(In cases where the generic MOTW comment (<!-- saved from url=(0014)about:internet -->) is used because the domain name is unknown, the “about:internet” forces Internet Explorer to host the webpage in the Internet zone.)

这句话的作用是让Internet Explorer 使用 Internet 区域的安全设置,而不是本地计算机区域的设置。

如需识别从特定域下载(从而已应用了包含该域的区域的安全设置)的 HTML,请使用相应域名添加以下注释:
<!-- saved from url=(0023)http://www.contoso.com/ -->
括号中的数字与 URL 的长度有关。
官方参考文档 https://msdn.microsoft.com/en-us/library/ms537628(v=vs.85).aspx

当我们开发网站要考虑到兼容低版本浏览器的时候,不要忘了填上这句话哦!


Leave a Reply

Your email address will not be published. Required fields are marked *