检测设备并交换 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 添加到样式表<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>

这样，您将删除对 j​​Query 的 100K plus 有效负载的依赖，然后才能将样式表应用到页面。

更新：

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

你看过@media queries吗？