码迷,mamicode.com
首页 > 其他好文 > 详细

浅谈X-UA-Compatible&viewport

时间:2021-01-11 10:48:49      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:环境   标准   blank   无法   就是   通过   ie浏览器   验证   http   

作为一个后端开发者,在自建博客的过程中,发现了前端工作的不易与重要性,相互尊重才是成王之道,自己已在全栈工程师的行程中奔波。

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

首先!感谢: 给网站添加X-UA-Compatible标签-[Sivan]


 

代码

<meta http-eqiv="X-UA-Compatible" content="ie=edge">

什么是X-UA-Compatible?

X-UA-Compatible是IE8的一个专有属性,他告诉IE8采用何种IE版本去渲染网页,在html中的head标签中使用。可以在微软官方文档获取更多介绍。

为什么要用X-UA-Compatible?

在IE8刚推出的时候,很多网页由于重构的问题,无法适应较高级的浏览器,所以使用X-UA-Comptible标签来强制IE8采用低版本方式渲染
使用下面这段代码后,开发者无需考虑网页是否兼容IE8浏览器,只要确保网页在IE6、IE7下的表现就可以了

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

时至今日,IE6已被微软判了死刑,我们在重构时应首先考虑更完善的IE8下的体验,然后依次回退兼容IE7和6。令我担忧的情况是当IE9正式发布时如果IE6在国内还没被淘汰,那么将出现前端工程师需要面临4个IE版本的疯狂局面(且4个版本显示差异较明显)。

给网站添加X-UA-Compatible标签

我建议使用下面的X-UA-Compatible标签:

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

IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame

网页中添加方法

在<head>下面添加上述代码即可。WordPress则在主题header.php文件里做修改。

这样的方法简单快捷,但是弊端是代码将无法通过W3C验证。其实这并不是问题,毕竟标准只是标准,如果只有这一个“错误”完全不会有任何不良的影响。

当然你可能像Sivan一样有代码洁癖和一定程度的标准癖,那么我们还可以从服务器端进行这个设置,请继续往下看。

Apache服务器设置方法

嗯??我们可以在Apache主机做一些设置让服务器告诉IE采用何种引擎来渲染。在网站作用目录找到或新建.htaccess文件,添加下面的内容保存即可。

<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    BrowserMatch MSIE ie
    Header set X-UA-Compatible "IE=Edge" env=ie
    BrowserMatch chromeframe gcf
    Header append X-UA-Compatible "chrome=1" env=gcf
  </IfModule>
</IfModule>

Nginx服务器设置方法

现在很多朋友使用Nginx作为搭建环境,当然也是OK的。找到\nginx\conf\nginx.conf并编辑,在server { }区域里(最好是闭合符前面起一行)添加下列代码即可

add_header "X-UA-Compatible" "IE=Edge,chrome=1";

不清楚具体位置的请参考paul irish的配置文件

好啦,上面就是3种常用的添加方法。我认为这个标签主要是为重构者服务,如果代码的兼容性很强那么不用也罢。

Chrome Frame[1]:Chrome Frame可以让旧版IE浏览器使用Chrome的WebKit渲染引擎处理网页,因此旧版IE用户可以体验到包括HTML5在内的众多现代网页技术。


 

 

 

 

 

浅谈X-UA-Compatible&viewport

标签:环境   标准   blank   无法   就是   通过   ie浏览器   验证   http   

原文地址:https://www.cnblogs.com/HarryVan/p/14249262.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!