浅析网页meta标签中X-UA-Compatible属性的使用
今天有一个做开发的朋友突然问你知道很多网站上面加入的X-UA-Compatible属性的意义么?其实这个在以前还专门花了一点时间来验证我自己的想法,结果也确实如自己所预想的那样,八九不离十,当然有一点点的偏差。我做的项目中也并不是每个项目中都使用该属性。那么我们首先来看看几个知名站点,他们也使用了这个
上面时淘宝的,下面是百度的。
都可以发现在head中又一个meta,里面有一个X-UA-Compatible的属性,而且确实非常多的网站中在使用。当然也有很多网站是在开发的时候不管三七二十一给加上去的,理由可能就是看到别人在用。而我这位朋友问的恰好就是这个,他跟我一样,非常喜欢知根知底,我觉得这对于开发来讲是好事;因为再简单的东西深入一点总会更好的。
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
就是上面的一小段,那么他到底有什么用了?其实你可以百度下“IE=edge,chrome=1”,绝对能发现很多相关的文章,但那些文章只是复述人家的话,那些写文章的也许根本就没有尝试。比如解释最多的就是“强制浏览器的渲染方式,默认使用chrome来渲染,然后再按照IE该浏览器的最新版本来渲染”,类似这样意思的观点最多了,而且是点到为止。
当然,这样解释并没有方向性的错误,但是对于很多想了解这个东西的人来讲,看了这个要么不知道是说啥,要么就可能会误解,比如误解成加入这个不管是IE哪个版本都可以渲染成chrome(想想都觉得不现实嘛,如果这样岂不是逆天了,微软得哭晕在厕所,谷歌和开发者们会半夜都笑醒的)。
那么这篇文章我仅针对以上IE=edge,chrome=1来说事情,其他的属性值请自行根据我下面的思路百度或Google自己理解消化。上面那个解释没有方向性的问题,确实是关于浏览器渲染问题,而且也确实是可以渲染IE成Chrome。
但这里就不得不提Google的一个项目,那就是Chrome Frame(项目主页,需要FQ),这个项目就是在不改变IE的外观情况下使用Chrome内核,就好比如果IE是个人,那么这个人的四肢不变,但把大脑给换了一样。而上面的写法跟这个项目是有关系的,但是我们现在去访问这个页面会显示“Google Chrome Frame is no longer supported and retired as of February 25, 2014.”,也就是说在2014年的时候就已经不提供支持服务了。
因此上面概况起来的意思是什么了?我觉得如果用谁都听得懂的话来说就是以下几个要点:
- X-UA-Compatible确实是为了我们定义浏览器的渲染方式的;
- 如果存在客户端Chrome Frame并启用,那么浏览器访问页面会被Chrome内核渲染(这一点没太大意义,因为你开发的项目不能要求用户在客户端来安装Chrome Frame);也就是说IE浏览器变身Chrome是可以的,但前提是客户端安装了Chrome Frame,呵呵;
- 使用IE内核浏览器来访问,会渲染至该浏览器的最高版本,比如你使用IE9浏览器,那么就算在兼容模式切换至IE7,但仍会渲染成IE9的样子(当然IE7浏览器是不会渲染成IE9的,不然想想都好美丽)。
比如现在我在客户端装了Chrome Frame,然后我的IE浏览器是IE11,也就是说我服务器端已经设置了X-UA-Compatible属性的值为IE=edge,chrome=1,客户端已经安装并启用Chrome Frame。我现在用IE浏览器打开指定网页。
咦,竟然在IE浏览器下看到了审查元素,而且点击审查元素出现了在Chrome下几乎一样的控制台。
这个过程就是这样子啦,就如上面所说,其实呢X-UA-Compatible还有各种其他的写法,这里就不再说了,可以按照上面的流程来尝试,然后必然或多或少会有一点自己的理解和收获。我个人认为借鉴学习是必要的,但一定要有自我消化的意识,大家共勉吧!
浅析网页meta标签中X-UA-Compatible属性的使用相关推荐
- 关于Meta标签中format-detection属性及含义
一.Meta标签中的format-detection属性及含义 意为:格式检测 或许你会有这样的经历:当你在制作手机端的页面中,点击了没有加任何链接的格式的数字时,这时手机会进行自动拔号提示操作! 禁 ...
- HTML中meta标签中charset属性的写法以及用法
meta标签中的charset属性是用来声明文档使用的字符编码.解决文档出现乱码的问题主要就是靠它!需要注意的是,这个charset属性的声明必须写在head中最靠前的位置,否则就可能出现乱码的问题. ...
- 给li标签中的span设置属性margin-bottom不生效
给li标签中的span设置属性margin-bottom不生效 html如下: <ul class="lottery_main""><!-- 每个中间人 ...
- style标签中的几个属性
1.vue中使用css通常采用如下形式 <style lang="scss" scoped></style> 2.lang="scss" ...
- 关于jsp页面中的pageEncoding和contentType以及html中的meta标签中字符集的设置(转)...
转载:<关于JSP页面中的pageEncoding和contentType两种属性的区别> pageEncoding是jsp文件本身的编码 contentType的charset是指服务器 ...
- Meta标签中的format-detection属性及含义
format-detection翻译成中文的意思是"格式检测",顾名思义,它是用来检测html里的一些格式的,那关于meta的format-detection属性主要是有以下几个设 ...
- HTML网页div标签中嵌套其他html页面
主页面为main.html,点击在div添加html按钮id为btn, div的id为viewDiv,要插入的本地html为new.html. 方法一:基于Jquery的DIV嵌套html(测试可用 ...
- a 标签中 rel=“noopener noreferrer“属性的含义和功能
a标签:网页超链接中隐藏的钓鱼攻击 先看一条代码: <a href="" rel="noopener noreferrer" >跳转到2页</ ...
- img标签中alt和title属性的正确使用
在的img标签有两个属性分别为alt和title,对于很多初学者而言对这两个属性的正确使用都还抱有迷惑,当然这其中一部分原因也是ie浏览器所导致的.正确的使用这两个属性除了可以提高图片的搜索能力外,在 ...
最新文章
- Nginx配置文件nginx.conf中文详解
- JAVA/PHP/C#版RSA验签--转
- 在 ns-3.25中添加 plc(电力线载波) 模块
- ea 备份码是什么_EA的原始访问是什么,值得吗?
- c#数组获取元素的索引_获取元素集合 从C#中的指定索引
- 如何安装pfbprophet
- c++中vector用法(涵盖算法题中知识点)
- No package ‘mate-desktop-2.0‘ found
- javaScript点击鼠标改变背景颜色
- 大脑是如何塑造你的感觉?
- 等保2.0|二级等保和三级等保要求对比
- Soul持续发力社交渠道赴港上市,“Soul式社交”凭什么火出圈?
- 大型强子对撞机再次遭遇断电
- “百度杯”CTF比赛 十月场 writeup
- 借道IIS搭建企业内部Web方式文件共享平台
- 如何在Dockerfile中发表评论?
- python怎么制作游戏存档功能,如何在Python中创建目录的zip存档?
- [转]如何降低二手烟的危害
- 多光纤推接 (MPO) 连接器
- CocosCreator制作小游戏之单机斗地主
热门文章
- C++实现tree树(附完整源码)
- C语言分区排序partition sort 算法(附完整源码)
- QT的QSet类的使用
- C++变量、函数在内存中的情况
- 1、虚拟机内存管理、运行时数据区、线程共享区、Java堆、新生代、老年代、Eden区域分配、方法区、线程独占区、虚拟机栈
- Disconf介绍,源码下载,环境准备,安装,disconf-web使用和配置介绍,项目中进行配置,项目案例运行
- 19_Android中图片处理原理篇,关于人脸识别网站,图片加载到内存,图片缩放,图片翻转倒置,网上撕衣服游戏案例编写
- 3.Boost之function
- QQ窗口的控制,同步异步打开360网盘,控制360网盘窗口的移动
- Python 随机森林分类