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

Detect device and swap the CSS file - jQuery

本文关键字：jQuery 文件 CSS 交换 检测设备      更新时间：2023-09-26

我的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>

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>

这样，在将样式表应用到页面之前，您将消除对jQuery的100K +有效负载的依赖。

更新:

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

你看过@media queries了吗?

相关文章：