如何為移動設備檢測和交付單獨的CSS文件？

Question

我正在嘗試檢測移動設備並加載單獨的CSS文件（如果它是移動設備）。 為什么我的代碼不起作用？

    var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};


function getcss(cssfile){

    var loadcss = document.createElement('link')

    loadcss.rel = "stylesheet"

    loadcss.setAttribute("type", "text/css")

    loadcss.setAttribute("href", cssfile)

    document.getElementsByTagName("head")[0].appendChild(loadcss)

}

if(isMobile.any() == true)
// Defines the resolution range you're targeting (less than 800 pixels wide in this case)

{

getcss('cssclass.css')
// Defines the .css file you want to load for this range (800x600.css)

}

else 

{

getcss('css2menuPage.css') 
//This else statement has "if" condition. If none of the following criteria are met, load 1280x1024.css

}

Answer 1

@media屏幕大小就像上面提到的Brad。 否則，您將需要設置一個用戶代理數據庫。

@media屏幕和（最大寬度：960px）{h1，h2 {color：＃990000; 字體大小：1.4em; }}