今天有一个做开发的朋友突然问你知道很多网站上面加入的X-UA-Compatible属性的意义么?其实这个在以前还专门花了一点时间来验证我自己的想法,结果也确实如自己所预想的那样,八九不离十,当然有一点点的偏差。我做的项目中也并不是每个项目中都使用该属性。那么我们首先来看看几个知名站点,他们也使用了这个

上面时淘宝的,下面是百度的。

都可以发现在head中又一个meta,里面有一个X-UA-Compatible的属性,而且确实非常多的网站中在使用。当然也有很多网站是在开发的时候不管三七二十一给加上去的,理由可能就是看到别人在用。而我这位朋友问的恰好就是这个,他跟我一样,非常喜欢知根知底,我觉得这对于开发来讲是好事;因为再简单的东西深入一点总会更好的。

  1. <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(项目主页,需要翻墙),这个项目就是在不改变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标签中X-UA-Compatible属性的使用的更多相关文章

  1. meta标签中设置以极速模式打开网页

    1.网页meta标签中X-UA-Compatible属性的使用的极速模式 <meta http-equiv="X-UA-Compatible" content="I ...

  2. meta标签中的http-equiv属性使用介绍(转载)

    meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...

  3. 关于Meta标签中format-detection属性及含义

    一.Meta标签中的format-detection属性及含义 意为:格式检测 或许你会有这样的经历:当你在制作手机端的页面中,点击了没有加任何链接的格式的数字时,这时手机会进行自动拔号提示操作! 禁 ...

  4. HTML中Meta标签中http-equiv属性小结

    HTML中Meta标签中http-equiv的用法: <meta http-equiv="这里是参数" content="这里是参数值"> 1.Ex ...

  5. HTML中Meta标签中http-equiv属性

    HTML中Meta标签中http-equiv的用法: <meta http-equiv="这里是参数" content="这里是参数值"> 1.Ex ...

  6. 关于meta标签中的http-equiv属性使用介绍

    关于meta标签中的http-equiv属性使用介绍 meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标 ...

  7. 【转】meta标签中的http-equiv属性使用介绍

    meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...

  8. Meta标签中的format-detection属性及含义(转)

    一.Meta标签中的format-detection属性及含义 意为:格式检测 或许你会有这样的经历:当你在制作手机端的页面中,点击了没有加任何链接的格式的数字时,这时手机会进行自动拔号提示操作! 禁 ...

  9. <meta>标签中http-equiv属性的属性值X-UA-Compatible详解

    X-UA-Compatible是针对IE8新加的一个设置,对于IE8之外的浏览器是不识别的,这个区别与content="IE=7"在无论页面是否包含<!DOCTYPE> ...

随机推荐

  1. Appium超详细环境搭建for Mac

      兜兜转转试用了一圈自动化框架后,回归到appium,与一年之前相比,appium有了很大的改变:1.iOS 9 之前一直以 instruments 下的 UIAutomation为驱动底层技术(弊 ...

  2. .NET CORE(C#) WPF 重新设计Instagram

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. .NET CORE(C#) WPF 重新设计Instagram 阅读导航 本文背景 代码实现 ...

  3. 通过Java代码获取系统信息

    在开发中,我们需要获取JVM中的信息,以及操作系统信息,内存信息,CPU信息,磁盘信息,网络信息等,通过Java的API不能获取内存等信息,需要sigar的第三方依赖包. ①:加入依赖 <dep ...

  4. textarea输入文字限制个数

    说明: w-count固定为数字部分的class textarea-active为超出最大输入文字个数报错信息的class html 部分: <div class="wrap wrap ...

  5. neo4j学习摘要

    参考 链接:https://gitbook.cn/books/5a33782c5778440a9d906017/index.html

  6. AGC011-C Squared Graph

    题意 给定一个\(n\)个点\(m\)条边的图,构建一个\(n^2\)个点的图,新图的每个点都可以看成一个二元组,新图上的点\((a,b)和(a′,b′)\)之间有边,当且仅当原图中\((a,a′), ...

  7. FPGA分频与倍频的简单总结(涉及自己设计,调用时钟IP核,调用MMCM原语模块)

    原理介绍 1.分频 FPGA设计中时钟分频是重要的基础知识,对于分频通常是利用计数器来实现想要的时钟频率,由此可知分频后的频率周期更大.一般而言实现偶数系数的分频在程序设计上较为容易,而奇数分频则相对 ...

  8. 服务器CentOS7上安装MySql

    1.确保服务器系统处于最新状态 [root@localhost ~]# yum -y update如果显示以下内容说明已经更新完成Replaced:grub2.x86_64 1:2.02-0.64.e ...

  9. 论文阅读笔记(十七)【ICCV2017】:Dynamic Label Graph Matching for Unsupervised Video Re-Identification

    Introduction 文章主要提出了 Dynamic Graph Matching(DGM)方法,以非监督的方式对多个相机的行人视频中识别出正确匹配.错误匹配的结果.本文主要思想如下图: 具体而言 ...

  10. CentOS7安装gotoblas遇到的问题

    1. 错误信息: /usr/lib64/gcc/x86_64-suse-linux/4.7/../../../../x86_64-suse-linux/bin/ld: cannot find -l-l ...