js 擷取手機瀏覽器類型，修改css檔案的class的值

標籤：

/*=========================================    函數功能：擷取瀏覽器類型=========================================*/function getBrowser(){    var type = "pc"    var ua = navigator.userAgent.toLowerCase();    /*    Navigator 是HTML DOM中的內建對象，它包含有關瀏覽器的資訊。userAgent是Navigator 的屬性方法，可返回由客戶機發送伺服器的 user-agent 頭部的值。作用其實就是返回目前使用者所使用的是什麼瀏覽器，*/    if(ua.indexOf(‘android‘) > -1)    {        type = "android"        var start_index = ua.indexOf(‘android‘);        var version = ua.substring(start_index, start_index + 12);        version = version.replace("/", " ");        // 低於 android 4.4 版本        if(version < "android 4.4")        {            params.lowVersion = true;            updateClass("common.css", ".modal-dialog", function(cssRule){                cssRule.style.top = "2%";                cssRule.style.marginTop = "0px";            });            /*            .modal-dialog                {                  top: 45%;                  left: 50%;                  width: 300px;                  height: 500px;                  position: absolute;                  margin: -120px 0px 0px -150px;                }            */        }    }    else if(ua.indexOf(‘iphone‘) > -1 || ua.indexOf(‘ipad‘) > -1)    {        type = "ios";    }    return type;}/** * 修改檔案樣式 * @param fileName  檔案名稱 * @param className 樣式名稱 * @param method    回呼函數, 在回呼函數內修改樣式 */function updateClass(fileName, className, method){    var styleSheet = null, cssRule = null;    //document.styleSheets:擷取頁面的所有css樣式<link rel="stylesheet" type="text/css" href="../../../css/common.css">    for(var i = 0, len = document.styleSheets.length; i < len; i++) {        if(document.styleSheets[i].href != null && document.styleSheets[i].href.indexOf(fileName) >= 0)        {            styleSheet = document.styleSheets[i];            break;        }    }    if(styleSheet == null)    {        return;    }//styleSheet.cssRules擷取common.css檔案的所有樣式    for(var i = 0, len = styleSheet.cssRules.length; i < len; i++)    {        if(styleSheet.cssRules[i].selectorText && styleSheet.cssRules[i].selectorText.indexOf(className) >=0 )        {            cssRule = styleSheet.cssRules[i];            /*cssRule為：            .modal-dialog                {                  top: 45%;                  left: 50%;                  width: 300px;                  height: 500px;                  position: absolute;                  margin: -120px 0px 0px -150px;                }            */            method(cssRule);            return;        }    }}

 

js 擷取手機瀏覽器類型，修改css檔案的class的值