web開發兼容不同的屏幕分辨率和瀏覽器

版權聲明：本文為CSDN博主「w冰淇淋」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/wbx_wlg/article/details/84333445

 

在web開發的過程中經常會要求根據不同的屏幕大小來做兼容，尤其是webAPP的流行和各種響應式布局，兼容不同的屏幕分辨率更是前端開發者必會的技能。本篇主要介紹用CSS 的媒體查詢來兼容不同的屏幕大小和用js 來兼容不同的瀏覽器（主要是IE、火狐、360、谷歌、UC、QQ、百度等）。

 

一、CSS媒體查詢

使用 CSS3 的@media 查詢，你可以針對不同的媒體類型定義不同的樣式。它的語法結構是：

 

@media mediatype and|not|only (media feature) {

     CSS-Code;

 }

 

我們在實際開發項目中針對常見的可以這樣寫，比如：

 

/*最大屏幕分辨率為1280px*/

@media screen and (max-width:1280px){

.content{

width:20%

}

}

/*最小屏幕分辨率為1280px且最大為1440px*/

@media (min-width: 1280px) and (max-width:1440px){

.content{

width:40%

}

}

/*最小屏幕分辨率為1440px且最大為1680px*/

@media (min-width: 1440px) and (max-width:1680px){

.content{

width:60%

}

}

/*最小屏幕分辨率為1920px*/

@media screen and (min-width:1920px){

.content{

width:100%

}

}

 

將類名針對不同的屏幕大小寫在對應的媒體查詢內容中，系統會根據不同的樣式內容在瀏覽器里做出響應式變化，此方法也常用於適應兼容不同的移動設備。

 

二、js判斷瀏覽器內核

在實際開發項目中，同樣的屏幕分辨率寬度但由於各個瀏覽器的內核或者菜單欄導航欄顯示內容的不同，所呈現的網頁效果會有差別，所以需要判斷不同的瀏覽器內核來在樣式上做區別。在響應式布局中，有些高度和寬度都需要用百分比來做適應，那這個時候的高度我們可以在不同的瀏覽器里做個對比，在同樣的屏幕分辨率下，可以看出，360的內容高度是891px，谷歌是908px，IE是886px，這樣就導致我們在做高度自適應時效果上會有差異，針對解決這一問題，我們來用js判斷瀏覽器內核，根據不同的內核做樣式調整：

（注：原生Chrome中存在一種MimeType“application/vnd.chromium.remoting-viewer”，由此可以判斷瀏覽器是加殼Chrome或是原生Chrome。）

 

 checkBrowser();//判斷瀏覽器

function checkBrowser() {

    var ua = navigator.userAgent.toLocaleLowerCase();

    var screenWidth=window.screen.width;

    var bodyHeight=$("body").height();

    console.log("屏幕寬度 "+screenWidth);

    console.log("內容高度 "+bodyHeight);

    var browserType = null;

    if (ua.match(/msie/) != null || ua.match(/trident/) != null) {

        browserType = "IE";

        browserVersion = ua.match(/msie ([\d.]+)/) != null ? ua.match(/msie ([\d.]+)/)[1] : ua.match(/rv:([\d.]+)/)[1];

        //針對IE瀏覽器在此處寫入樣式

        // CSS-Code;

    } else if (ua.match(/firefox/) != null) {

        browserType = "火狐";

            //針對火狐瀏覽器在此處寫入樣式

        // CSS-Code;

    } else if (ua.match(/ubrowser/) != null) {

        browserType = "UC";

          //針對UC瀏覽器在此處寫入樣式

        // CSS-Code;

    } else if (ua.match(/opera/) != null) {

        browserType = "歐朋";

    //針對歐朋瀏覽器在此處寫入樣式

        // CSS-Code;

    } else if (ua.match(/bidubrowser/) != null) {

        browserType = "百度";

         //針對百度瀏覽器在此處寫入樣式

        // CSS-Code;

    } else if (ua.match(/metasr/) != null) {

        browserType = "搜狗";

         //針對搜狗瀏覽器在此處寫入樣式

        // CSS-Code;

    } else if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {

        browserType = "QQ";

         //針對QQ瀏覽器在此處寫入樣式

        // CSS-Code;

    } else if (ua.match(/maxthon/) != null) {

        browserType = "遨游";

         //針對遨游瀏覽器在此處寫入樣式

        // CSS-Code;

    } else if (ua.match(/chrome/) != null) {

        var is360 = _mime("type", "application/vnd.chromium.remoting-viewer");

        if (is360) {

            browserType = '360';

        } else {

            browserType = "谷歌";

        }

    } else if (ua.match(/safari/) != null) {

        browserType = "Safari";

    }

    function _mime(option, value) {

        var mimeTypes = navigator.mimeTypes;

        for (var mt in mimeTypes) {

            if (mimeTypes[mt][option] == value) {

                return true;

            }

        }

        return false;

    }

    console.log(browserType);

    return browserType;//返回瀏覽器類型

}