当前位置:首页 > 网站技术 > 前端技术 > 正文内容

meta标签功能之兼容主流浏览器

小彬2020-05-27前端技术363

其实一般新手估计都不会注意这个问题,新手大多都会迫不及待的为了实现网页而去重视代码,往往忽视最重要的meta标签,我就是这样,我也是做了两年的前端才算发现这个里面有很大的学问


我最近在一个人独自开发一个网站,所以很多事情都要考虑,最后关于所有浏览器兼容问题,本来我以为要改很多代码,因为我发现有的浏览器居然不兼容,后来看见


这位大佬写的文章IE 兼容性标记 X-UA-Compatible 解释和用法读完之后立刻觉得神清气爽!


我们要了解 IE 的文档模式分几种。

IE=5      Quirks Mode
IE=7      IE7 mode
IE=8      IE8 mode
IE=9      IE9 mode
IE=10    IE10 mode
IE=11    IE11 mode


如上所示,IE7 以上版本都有一个同名的文档模式,而 IE6 和 IE6 以下则只有一个模式,叫“Quirks Mode”。有人翻译成怪异模式,

叫什么不重要,我们知道这基本上等同于模拟 IE6 即可,因为 IE5 是比 IE6 更加史前的浏览器,现代人类基本上找不到还有人在使用。

END

X-UA-Compatible 标记语法

第一种,直接指定某个IE版本的标准文档模式。

以下是要求模拟 IE8 的例子:

<meta http-equiv="X-UA-Compatible" content="IE=8"/>
(注意:这在IE7、IE6中无效,因为 X-UA-Compatible 是 IE8 才开始支持的)

以下是要求模拟 IE9 的例子:


<meta http-equiv="X-UA-Compatible" content="IE=9"/>
(注意:这不仅在IE7、IE6中无效,在 IE8 中也无效,因为不能模拟高于当前的版本)


第二种,指定某个IE版本,但也允许例外。

在IE版本号前面加上 Emulate ,代表,如果网页开头有 <!DOCTYPE> 标记就使用该IE版本的标准文档模式,否则使用怪异模式(即等同于 IE=IE5)

以下是要求模拟 IE8 的例子:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
根据例子代码,如果你的网页开头带有 <!DOCTYPE> 标记,则模拟 IE8, 等同于:
<meta http-equiv="X-UA-Compatible" content="IE=IE8"/>
如果你的网页开头没有 <!DOCTYPE> 标记,则模拟 IE6, 等同于:
<meta http-equiv="X-UA-Compatible" content="IE=IE5"/>

不建议使用这个语法。


第三种,总是使用最新版本文档模式。

以下是例子:

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

根据例子代码,IE浏览器将总是使用最新版本的文档模式,如用 IE8 访问就是 IE8 文档模式,用 IE9 访问就是 IE9 模式,用 IE10 访问就是 IE10 模式,

用 IE11 访问就是 IE11 模式。

注意:此声明并不是多此一举,如果你不使用 IE=edge 标记,IE浏览器会根据你的网页内容采用兼容视图,可能采用更低版本。

除非不准备兼容所有旧版IE,否则也不建议使用这个语法。


除了标准用法之外,还有一些特殊用法,如:

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

这段代码的意思是,如果安装了 Google Chrome Frame (谷歌浏览器內嵌框架)则使用谷歌浏览器内核模式,否则使用最新的IE模式。

IE跨版本兼容思路

如上所述,X-UA-Compatible 只能模拟比当前安装版本更低的版本,不能模拟更高版本。根据这个特性,兼容思路如下。

如果我们要往下兼容到 IE8 ,那么我们网页则应该提前添加好标记:

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

网页HTML/CSS/JS代码按 IE8 浏览器文档模式进行兼容性处理,不使用超过 IE8 文档模式的特性。

那么,我们就只需要维护一份 IE8 兼容代码,而用户无论是在 IE9 / IE10 / IE11 访问都是如同 IE8 访问一样。(要往下兼容到 IE9 或者 IE10 都以此类推。)

然后为 IE8 以下版本添加旧版IE浏览器升级提示,或跳转到IE浏览器升级提示页,如 X-UA-Compatible 代码下添加:

<!--[if lte IE 7]><script>window.location.href='http://support.dmeng.net/upgrade-your-browser.html?
referrer='+encodeURIComponent(window.location.href);</script><![endif]-->


如无特殊情况,由于 IE11 以下版本都已停止更新,无论是从代码工作量还是从用户安全的角度来讲,我们都不应该再兼容 IE11 以下版本。

在这种情况下,我们可以使用如下标记:

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

然后为 IE11 以下版本添加旧版IE浏览器升级提示,或跳转到IE浏览器升级提示页,在 X-UA-Compatible 代码下添加:

<script>/*@cc_on window.location.href="http://support.dmeng.net/upgrade-your-browser.html?
referrer="+encodeURIComponent(window.location.href); @*/</script>

(IE10不支持 if IE 语句,但 @cc_on 是 IE10 及更旧版IE特有的条件编译语句,因此可以用来判断是否除 IE11 的其他IE版本。)


双核浏览器兼容思路

国产浏览器大多带有 Chromium 内核和 IE 内核,在用户访问网页时双核浏览器根据网页内容自动选择内核。

不过,双核浏览器也提供了类似 X-UA-Compatible 特性的 meta 标记,允许网页开发者通过标记选择内核。

一、使用 Chromium 内核(极速模式)
<meta name="renderer" content="webkit"/>
二、使用 IE 8/9/10/10 内核(IE标准模式,部分支持 HTML5)
<meta name="renderer" content="ie-stand"/>
三、使用 IE 6/7 内核(IE兼容模式,不支持 HTML5)
<meta name="renderer" content="ie-comp"/>


通过meta代码强制浏览器使用WebKit内核


如果网站采用最新CSS3/HTML5编写,那么,我们应该令其使用 Chromium 内核(也就是 Webkit 内核)渲染。

代码如下:

<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>

第一行作用于360浏览器、QQ浏览器等国产双核浏览器,第二行作用于其他双核浏览器。


如果网站在 IE 浏览器效果更好,那么,我们可以要求其使用IE标准内核渲染。

代码如下:

<meta name="renderer" content="ie-stand"/>


升级提示代码


实际上,由于 IE11 以下版本都已经停止更新,绝大部分前端开源项目都已经不再兼容 IE11 以下的旧版IE。

往下兼容到 IE8 版本的网站已经寥寥无几,兼容 IE7/IE6 更是近乎绝迹。

但是,即使每天只有稀稀拉拉几个旧版IE用户访问网站,我们也不应该让他看到一屏乱码。

面对依然使用旧版IE的用户,我们可以友好地提示其升级浏览器后再访问。


通过以下代码,当用户使用已经停止更新的IE10或旧版IE访问网站将会自动跳转到浏览器升级页:

<script>/*@cc_on window.location.href="http://support.dmeng.net/upgrade-your-browser.html?
referrer="+encodeURIComponent(window.location.href); @*/</script>


完整代码示例

综上所述,下面我们提供三个代码示例。

示例一:适合针对特定IE版本进行过优化的网站。

示例场景:网站针对 IE9 做了优化,IE10 / IE11 和双核浏览器访问时默认采用 IE9 标准文档模式。

而 IE8 及以下IE浏览器访问则跳转至升级提示页。

代码如下:

<meta name="renderer" content="ie-stand"/>
<meta name="force-rendering" content="ie-stand"/>
<meta http-equiv="X-UA-Compatible" content="IE=IE9"/>
<!--[if lte IE 8]><script>window.location.href='http://support.dmeng.net/upgrade-your-browser.html?
referrer='+encodeURIComponent(window.location.href);</script><![endif]-->


示例二:适合针对特定IE版本进行过优化但对HTML5更加友好的网站。

示例场景:网站针对 IE9 做了优化,但 Chrome 访问效果更佳,

双核浏览器访问时默认采用 Chrome 内核,IE10 / IE11 访问时优先采用 IE9 标准文档模式。而 IE8 及以下IE浏览器访问则跳转至升级提示页。

代码如下:

<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=IE9,chrome=1"/>
<!--[if lte IE 8]><script>window.location.href='http://support.dmeng.net/upgrade-your-browser.html?
referrer='+encodeURIComponent(window.location.href);</script><![endif]-->


示例三:只支持微软仍然支持和更新的IE11浏览器。

示例场景:考虑到微软已经停止更新IE10以及更低版本的IE,

为了用户使用安全和更好的使用体验,不再支持旧版IE。

双核浏览器访问时默认采用 Chrome 内核,IE11 以下旧版IE访问时跳转到升级提示页。

(@cc_on 是 IE10 及更旧版IE特有的条件编译语句,因此可以用来判断是否除 IE11 的其他IE版本。)

代码如下:

<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<script>/*@cc_on window.location.href="http://support.dmeng.net/upgrade-your-browser.html?
referrer="+encodeURIComponent(window.location.href); @*/</script>


 


自2016年1月12日起,Microsoft 不再为 IE 11 以下版本提供相应支持和更新。没有关键的浏览器安全更新,用户的电脑可能易受有害病毒、间谍软件和其他恶意软件的攻击,它们可以窃取或损害业务数据和信息。建议为网站添加旧版IE升级提示,不再兼容旧版IE!


但是我在使用过程中发现在猎豹浏览器和QQ浏览器IE内核下一直停留在升级浏览器页面,所以为了用户体验效果,我并没有完全按照以上写法,

<meta name="renderer" content="webkit">
<meta name="force-rendering" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

然后加了一段js判断浏览器的代码,逻辑是如果检测到是IE内核就提醒切换浏览器内核模式或者更换为其他浏览器

标签: htmlmeta
分享给朋友:

相关文章

5种常见网页自动跳转方法

5种常见网页自动跳转方法

利用HTML标记(META中的REFRESH属性)用HTML标记,就是用META的REFRESH标记,举例如下:<meta http-equiv=refresh content="10...

常用正则表达式汇总

常用正则表达式汇总

来源:菜鸟教程http://c.runoob.com/front-end/854常用正则表达式正则表达式元字符和特殊字符移步6、第五章--引用类型(Date类型、RegExp类型)一、校验数字的表达式...

PC端固定顶部的导航栏在屏幕缩小时左右滚动

PC端固定顶部的导航栏在屏幕缩小时左右滚动

一般网站都会有固定导航栏,但是大多数都是随着屏幕的缩小并不会出现左右滚动。比如京东和淘宝的官网就是没有出现左右滚动你想想,如果把这个问题解决掉,其实你比他们还优秀言归正传,那就来说说怎么实现。首先上我...

HTTP之使用HTTP+JAVA构建应用

HTTP之使用HTTP+JAVA构建应用

1、HTTP请求服务器的简单实现(开发)下载Java jdk :  www.oracle.com 添加到环境变量 JAVA_HOME(C:\Program Files\Java\j...

基于Vue自定义左右渐变图片轮播组件

基于Vue自定义左右渐变图片轮播组件

本文取自 https://github.com/zhangxiaoshang/va-carousel 的 一个基于 vue 的图片轮播组件 我在此基础上修改了一下,自己用...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

分享:

支付宝

微信