最新公告
  • 欢迎访问代码工坊,购买产品可享受在线工单服务!
  • 前端页面通过meta头代码强制浏览器使用WebKit内核极速模式的方法

    为什么这么做

      国产浏览器(360安全浏览器、360极速浏览器、QQ浏览器、搜狗浏览器等)大多是双内核,甚至是三内核。一个Chromium内核,也就是google出品的开源内核,与chrome类似,切换到这个内核的模式一般称之为极速模式。另一个IE内核,称之为IE模式,有的甚至还有一个自行修改过的IE内核,称之为兼容模式,兼容模式一般是较老的版本,比如内核版本接近于IE7。

    前端页面通过meta头代码强制浏览器使用WebKit内核极速模式的方法

      国产浏览器这样做的原因是由于国内还有大量为IE浏览器量身定做的网站,在现代浏览器下访问效果不佳,为了兼容这些网站,并不默认使用极速模式,而是根据页面代码结构来判断选择IE模式或者兼容模式或者极速模式。

      但问题在于,浏览器自动选择经常判断错误,导致应使用Webkit可以获得更好浏览效果的网站错误的在IE模式下运行,导致页面错乱。终端用户不解,让开发者也很头疼。

      为了解决这一问题,目前多核浏览器已经支持通过meta头标签指定浏览模式,我们可以通过meta代码强制浏览器启用Chromium(webkit)内核,为用户提供最好的使用体验。

    步骤

      一、在网页head头部标签内添加以下代码:

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

      3个都写上就不会出现 <meta name="renderer" content="webkit"/> 不起作用的问题

      二、这三行代码分别作用于不同环境,功能如下:

    <!-- 如果有安装 Google Chrome Frame 插件则强制为Chromium内核,否则强制本机支持的最高版本IE内核,作用于IE浏览器 -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    
    <!-- 强制Chromium内核,作用于360浏览器、QQ浏览器等国产双核浏览器 -->
    <meta name="renderer" content="webkit"/>
    
    <!-- 强制Chromium内核,作用于其他双核浏览器 -->
    <meta name="force-rendering" content="webkit"/>

    低版本IE浏览器访问问题

      添加好强制Webkit内核的代码,使用国产浏览器访问网站已经不存在IE兼容问题了,IE访客量将大大减少。但仍然不可避免会有一些老旧电脑通过低版本IE浏览器访问,如果我们专门为了这极小部分用户进行 CSS HACK ,将严重加重我们的工作量。

      更何况自2016年1月起微软已经停止为IE11以下版本提供支持和更新,已经这么久没有更新,低版本IE不仅对CSS3和HTML5支持有问题,更有安全问题。而且国内很多大的平台,比如淘宝www.taobao.com、天猫www.tmall.com、代码工坊www.daimagongfang.com都已经放弃对低版本IE浏览器的支持。

      那么我们不去支持低版本IE,这小部分用户怎么办呢?

      我们可以使用 if IE 语句给网站添加IE升级提示,提示用户进行浏览器升级,或者切换更先进的浏览器再访问。

      我们可以在刚刚的meta标签下添加一段跳转到IE升级提示页的代码(当IE版本低于IE11时跳转),实现低版本IE用户访问时提示他们进行升级或者更换浏览器。

      强制Webkit内核和提示低版本IE访问用户升级完整代码如下所示,把这段代码添加到前端页面的head头部区域内即可:

    <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>

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

      这样,我们便完成了前端页面针对浏览器的兼容性设置,可以让我们的网站用户具有更好的浏览体验。

    发表评论