检测设备并交换CSS文件 - jQuery

Question

我的Web应用程序面向主要的智能手机,我需要根据设备更改CSS文件(如果UI中有问题需要点击它们),我正在计划使用以下jQuery交换CSS.只是想知道它是否是最佳实践并且性能良好？

<link rel="stylesheet" href="basic.css" type="text/css" class="cssLink" />
<link rel="stylesheet" href="general.css" type="text/css" />

<script type="text/javascript"> 
    $(document).ready(function() {

        //  css file based on the device
        var controlCss;
        //  get the device agent and conver to lover case
        var deviceAgent = navigator.userAgent.toLowerCase();

        if(deviceAgent.match(/android/i)){
            controlCss = "android.css";
            $(".cssLink").attr("href", controlCss);
        }
        else if(deviceAgent.match(/webso/i)){
            controlCss = "webOS.css";
            $(".cssLink").attr("href", controlCss);
        }
        else if(deviceAgent.match(/iphone/i)){
            controlCss = "iphone.css";
            $(".cssLink").attr("href", controlCss);
        }
        else if(deviceAgent.match(/ipod/i)){
            controlCss = "ipad.css";
            $(".cssLink").attr("href", controlCss);
        }
        else if(deviceAgent.match(/blackberry/i)){
            controlCss = "bb.css";
            $(".cssLink").attr("href", controlCss);
        }
        else {
            controlCss = "basic.css";
            $(".cssLink").attr("href", controlCss);
        }
    }); 
</script>

Answer 1

1.这是最好的做法吗？

取决于您认为的最佳实践,以及您的应用程序和公司的最佳实践.这让我想到的一件事是:你能保证你的所有页面都使用jQuery吗？如果是这样,那么我认为这是实现目标的好方法.另一种方法是做这个服务器端,这将保证最佳性能,但可能还有其他原因,你不想这样做(也许你没有访问服务器端代码,或者你想保持大部分的前端程序员手中的功能).

2.性能好吗？

最简洁的答案是不.除了需要100K + jQuery的有效负载在页面上注入CSS之外.您目前解决问题的方法是在向其添加样式之前等待整个页面(以及所有依赖项)加载.这将在页面首次显示(没有样式)和样式加载并且一切都移动之间产生明显的"跳跃".

加载CSS服务器端将摆脱这一点,但我认为您仍然可以在UI中执行此操作并将大部分代码库保留在JavaScript中,这将使其更易于维护.为此,请在调用CSS文件之前删除等待文档加载的位:

<link rel="stylesheet" href="basic.css" type="text/css" class="cssLink" />
<link rel="stylesheet" href="general.css" type="text/css" />

<script type="text/javascript"> 

     // No need to wait for document to load
     // $(document).ready(function() {

        //  css file based on the device
        var controlCss;
        //  get the device agent and conver to lover case
        var deviceAgent = navigator.userAgent.toLowerCase();

        if(deviceAgent.match(/android/i)){
            controlCss = "android.css";
            $(".cssLink").attr("href", controlCss);
        }

        // etc..

    // }); 
</script>

为了进一步提高性能,您可以使用不依赖于jQuery的解决方案,而不是

$(".cssLink").attr("href", controlCss);

你可以添加#cssLink到stylesheet <link>元素并使用DOM来做同样的事情:

document.getElementById("cssLink").setAttribute("href", controlCss);

这将使您的代码看起来如下:

<link rel="stylesheet" href="basic.css" type="text/css" css="cssLink" id="cssLink" />
<link rel="stylesheet" href="general.css" type="text/css" />

<script type="text/javascript"> 

        // .. blah blah .. 

        if(deviceAgent.match(/android/i)){
            controlCss = "android.css";
            // use a solution that does not need jQuery
            document.getElementById("cssLink").setAttribute("href", controlCss);
        }

        // etc..

</script>

这样,您可以在将样式表应用到页面之前删除对jQuery的100K plus有效负载的依赖性.

更新:

也可以根据屏幕大小而不是设备应用CSS规则.

你看过@media查询了吗？