检测设备并交换CSS文件 - jQuery [英] Detect device and swap the CSS file - jQuery

问题描述

我的web应用程序目标到主要的智能手机，我需要根据设备更改CSS文件（如果UI中有问题需要打它们），我计划交换CSS使用以下jQuery。

 < link rel =stylesheethref = basic.csstype =text / cssclass =cssLink/> 
< link rel =stylesheethref =general.csstype =text / css/> 
 
< script type =text / javascript> 
 $（document）.ready（function（）{
 
 //基于设备的css文件
 var controlCss; 
 //获取设备代理和转换to device 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）; 
} 
 if（deviceAgent.match（/ blackberry / i））{
 controlCss =bb.css; 
 $（。cssLink）。attr（href，controlCss）; 
} 
 else {
 controlCss =basic.css; 
 $（。cssLink）。attr（href，controlCss）; 
} 
}）; 
< / script> 
  

解决方案

1.是最佳实践吗？

取决于您认为的最佳做法，最佳做法是在您的应用程序和您的公司的上下文中。这让我想到的一件事是：你能保证所有的网页将使用jQuery吗？如果是这样，我认为这是一个很好的方法来实现你的后。另一种方法是在服务器端执行此操作，这将确保最佳性能，但可能还有其他原因，您不想这样做（也许你没有访问服务器端代码，或者你想保持大部分功能。）

2.性能好吗？

简短的答案是没有。除了需要jQuery的100K +有效负载以在页面上注入CSS之外。你目前处理问题的方法是等待整个页面（和所有依赖关系）加载之前添加样式。这将创建一个明显的跳跃，当页面首次显示（没有样式），当样式被加载和一切移动。

加载CSS服务器端将会摆脱这一点，但我想你仍然可以在UI中做，并保持大部分的代码库在JavaScript将使其更容易维护。为此，请在调用CSS文件之前删除等待文档加载的位：

 < ; link rel =stylesheethref =basic.csstype =text / cssclass =cssLink/> 
< link rel =stylesheethref =general.csstype =text / css/> 
 
< script type =text / javascript> 
 
 //无需等待文档加载
 // $（document）.ready（function（）{
 
 //基于device 
 var controlCss; 
 //获取设备代理并转换为情人案例
 var deviceAgent = navigator.userAgent.toLowerCase（）; 
 
 if（deviceAgent。 match（/ android / i））{
 controlCss =android.css; 
 $（cssLink）。attr（href，controlCss）; 
} 
 
 //等.. 
 
 //}）; 
< / script> 
 

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

  $（。cssLink）。attr（href，controlCss）; 
  

您可以将 #cssLink 添加到样式表< link> 元素，并使用DOM执行相同操作：

  document.getElementById（cssLink）。setAttribute（href，controlCss）; 
  

这将使你的代码看起来如下：

 < link rel =stylesheethref =basic.csstype =text / csscss =cssLinkid =cssLink/& 
< link rel =stylesheethref =general.csstype =text / css/> 
 
< script type =text / javascript> 
 
 // .. blah blah .. 
 
 if（deviceAgent.match（/ android / i））{
 controlCss =android.css; 
 //使用不需要jQuery的解决方案
 document.getElementById（cssLink）。setAttribute（href，controlCss）; 
} 
 
 // etc .. 
 
< / script> 
 

这样，您将删除对jQuery的100K加负载的依赖，然后才能将样式表应用于

更新：基于屏幕尺寸而不是设备。

你看过 @ media queries ？

My web application target to major Smartphones and I need to change the CSS file according to device (if there are issues in the UI need to hit them), and I’m planning swap CSS using following jQuery. Just want to know whether is it a best practice and good in performance?

<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.Is it best practice?

Depends on what you think of as best practice, also what best practice is in the context of your application and your company. One thing this makes me think about is: Can you guarantee all your pages will be using jQuery? If so then I think this is a good approach to achieve what you are after. An alternative would be to do this server-side, that would guarantee best-performance but there may be other reasons why you dont want to do this (maybe you dont have access to server-side code, or you want to maintain most of the functionality in the hands of front-end programmers).

2.Is it good in performance?

The short answer is no. On top of needing the 100K+ payload of jQuery to inject the CSS on the page. The way you've approached the problem at the moment is to wait for the whole page (and all dependencies) to load before adding styles to it. This will create a noticeable 'jump' between when the page gets displayed at first (without styles) and when the styles get loaded and everything moves around.

Loading the CSS server-side will get rid of this, but I think you can still do this in the UI and keep the majority of your code-base in JavaScript which will make it easier to maintain. In order to do this, remove the bit where you wait for the document to be loaded before calling up your CSS file:

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

To further improve performance you could use a solution that does not depend on jQuery, instead of

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

you could add #cssLink to the stylesheet <link> element and use the DOM to do the same:

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

This would make you code look as follows:

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

This way you will remove the dependency on the 100K plus payload of jQuery before you can apply your stylesheets to the page.

UPDATE:

It is also possible to apply CSS rules based on screen size rather than device.

Have you had a look at @media queries?

这篇关于检测设备并交换CSS文件 - jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！