當IE低於11時跳到升級提示頁

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

這些瀏覽器這樣做的原因是國內還有大量爲IE瀏覽器量身定做的網站,爲了兼容這些網站,不默認啓用極速模式,而是根據代碼判斷選擇IE模式或者兼容模式或者極速模式。

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

幸好,現在多核瀏覽器已經支持通過meta標籤指定瀏覽模式,那麼,我們就可以通過meta代碼強制瀏覽器啓用Chromium內核,爲用戶提供最好的使用體驗。

在代碼編輯器中打開網站頭部模板文件,即 標籤所在文件。如 WordPress 的主題頭部模板文件是主題目錄下的 header.php 文件。

因爲瀏覽器內核決定了HTML/CSS/JS代碼的運行環境,所以我們需要把規定內核的代碼添加在所有代碼前面。

在頭部開始標籤下(是後面,不是後面)添加如下代碼:

如上所述,在 標籤後添加規定瀏覽器內核的meta代碼即可完成強制瀏覽器在Webkit內核環境下打開網站,爲用戶提供Chrome幾乎一樣的訪問效果。

你可以會奇怪,爲什麼有三行代碼?是的,沒錯,就是三行。這三行代碼分別作用於不同環境,如下所述:

強制Chromium內核,作用於360瀏覽器、QQ瀏覽器等國產雙核瀏覽器:

強制Chromium內核,作用於其他雙核瀏覽器:

如果有安裝 Google Chrome Frame 插件則強制爲Chromium內核,否則強制本機支持的最高版本IE內核,作用於IE瀏覽器:

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

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

那麼,我們不去支持低版本IE,這小部分用戶怎麼辦呢?

我們可以使用 if IE 語句給網站添加IE升級提示,提示用戶進行瀏覽器升級,或者切換更先進的瀏覽器再訪問。

我們可以在剛剛的meta標籤下添加一段跳轉到IE升級提示頁的代碼(當IE版本低於IE11時跳轉),實現低版本IE用戶訪問時提示他們進行升級或者更換瀏覽器。

強制Webkit內核和提示低版本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>
@cc_on, 支持ie11以前瀏覽器解釋,即ie11以前跳轉到ie升級頁 
(@cc_on 是 IE10 及更舊版IE特有的條件編譯語句,因此可以用來判斷是否除 IE11 以外的其他IE版本。) 

因爲低版本IE訪問時因爲不兼容CSS3和HTML5網站往往是錯版的,添加了上面這段代碼,當低版本IE用戶訪問時就會跳轉到升級提示頁,避免不必要的資源加載,降低網站服務器開銷。

// ie8以下自動跳轉升級瀏覽器

<script>
        /*@cc_on 
        var temp = window.navigator.userAgent.toUpperCase();
        var charHead = temp.indexOf('MSIE');
        var charLast = temp.indexOf(";", charHead);
        var ieVersion = temp.substring(charHead, charLast);
        ieVersion = ieVersion.split(' ')[1];
        if (ieVersion <= 8) {
            window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href);
        } 
        @*/
 </script>

JS-判斷當前瀏覽器是否爲IE

function IEVersion() {
            var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串  
            var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判斷是否IE<11瀏覽器  
            var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判斷是否IE的Edge瀏覽器  
            var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
            if(isIE) {
                var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
                reIE.test(userAgent);
                var fIEVersion = parseFloat(RegExp["$1"]);
                if(fIEVersion == 7) {
                    return 7;
                } else if(fIEVersion == 8) {
                    return 8;
                } else if(fIEVersion == 9) {
                    return 9;
                } else if(fIEVersion == 10) {
                    return 10;
                } else {
                    return 6;//IE版本<=7
                }   
            } else if(isEdge) {
                return 'edge';//edge
            } else if(isIE11) {
                return 11; //IE11  
            }else{
                return -1;//不是ie瀏覽器
            }
        }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章