天天看點

360浏覽器設定為預設極速模式,解決< meta name=“renderer” content=“webkit”>不起作用

解決< meta name=“renderer” content=“webkit”>不起作用,從“步驟”開始看起。

一般隻使用代碼

<meta name="renderer" content="webkit">

,會有些浏覽器會不起作用,是以在使用的時候,要完全兼顧。如果知道為什麼使用這個标簽,請直接從“步驟”開始檢視。

為什麼這麼做

國産浏覽器大多是雙核心,甚至是三核心。一個Chromium核心,也就是Chrome使用的核心,切換到這個核心的模式一般叫極速模式;一個IE核心,稱之為IE模式;有的甚至還有一個修改過的IE核心,稱之為相容模式。

這些浏覽器這樣做的原因是國内還有大量為IE浏覽器量身定做的網站,為了相容這些網站,不預設啟用極速模式,而是根據代碼判斷選擇IE模式或者相容模式或者極速模式。

問題在于,浏覽器自動選擇經常判斷錯誤,導緻本來使用Webkit可以獲得更好浏覽效果的網站錯誤在IE模式中帶着BUG運作。讓開發者頭疼。

幸好,現在多核浏覽器已經支援通過meta标簽指定浏覽模式,那麼,我們就可以通過meta代碼強制浏覽器啟用Chromium核心,為使用者提供最好的使用體驗。

步驟

  1. 在網頁頭部标簽内

    <head>

    添加以下代碼:
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
           
三個都寫上就不會出現 < meta name=“renderer” content=“webkit” > 不起作用的問題
  1. 這三行代碼分别作用于不同環境,如下所述:
<!-- 強制Chromium核心,作用于360浏覽器、QQ浏覽器等國産雙核浏覽器 -->
<meta name="renderer" content="webkit"/>
<!-- 強制Chromium核心,作用于其他雙核浏覽器 -->
<meta name="force-rendering" content="webkit"/>
<!-- 如果有安裝 Google Chrome Frame 插件則強制為Chromium核心,否則強制本機支援的最高版本IE核心,作用于IE浏覽器 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
           

低版本IE浏覽器通路問題

添加好強制Webkit核心的代碼,使用國産浏覽器通路網站已經不存在IE相容問題了,IE訪客量将大大減少。但仍然不可避免會有一些老舊電腦通過低版本IE浏覽器通路,如果我們專門為了這極小部分使用者進行 CSS HACK ,将嚴重加重我們的工作量。

更何況自2016年1月起微軟已經停止為IE11以下版本提供支援和更新,已經這麼久沒有更新,低版本IE不僅對CSS3和HTML5支援有問題,更有安全問題。

那麼,我們不去支援低版本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=" target="_blank" rel="external nofollow" +encodeURIComponent(window.location.href); @*/</script>
           
(@cc_on 是 IE10 及更舊版IE特有的條件編譯語句,是以可以用來判斷是否除 IE11 以外的其他IE版本。)

因為低版本IE通路時因為不相容CSS3和HTML5網站往往是錯版的,添加了上面這段代碼,當低版本IE使用者通路時就會跳轉到更新提示頁,避免不必要的資源加載,降低網站伺服器開銷。