Aygıtı algıla ve CSS dosyasını değiştir - jQuery

Question

Web uygulama hedefim büyük Akıllı telefonlara ve CSS dosyasını cihaza göre değiştirmem gerekiyor (eğer UI'de onları vurmak gerekiyorsa), ve ben değiştirmeyi planlıyorum Aşağıdaki jQuery kullanarak CSS. Sadece en iyi uygulama ve performansta iyi olup olmadığını bilmek ister misiniz?

<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. En iyi yöntem mi?

En iyi uygulama olarak ne düşündüğünüze bağlı olarak, uygulamanızın ve şirketinizin bağlamında en iyi uygulamanın ne olduğuna da bağlı. Bunun beni düşünmesini sağlayan bir şey: Tüm sayfalarınızın jQuery'yi kullanacağını garanti edebilir misiniz? Eğer öyleyse, o zaman sizin neyin peşinde olduğunuzu elde etmek için iyi bir yaklaşım olduğunu düşünüyorum. Bir sunucu, bu sunucu tarafında yapılacak en iyi performansı garanti eder, ancak bunu yapmak istememenizin başka nedenleri olabilir (belki de sunucu tarafı koduna erişiminiz yoktur, ya da ön uç programcıların elindeki işlevsellik.

2.Bu performans açısından iyidir mi?

Kısa cevap no. Sayfanın CSS'sini enjekte etmek için jQuery'nin 100K + yüküne ihtiyaç duyulduğunda. Soruna şu an yaklaşma biçiminiz, tüm sayfaların (ve tüm bağımlılıkların) stillere eklemeden önce yüklenmesini beklemektir. Bu, sayfanın ilk olarak (stiller olmadan) görüntülendiği zaman ve stiller yüklendiğinde ve her şey etrafta dolaştığı zamanlar arasında dikkat çekici bir 'sıçrama' oluşturacaktır.

CSS sunucu tarafına yükleme işlemi bundan kurtulacaktır, ancak bunu hala kullanıcı arayüzünde yapabileceğinizi ve kod tabanınızın çoğunu JavaScript'te tutmayı kolaylaştıracağını düşünüyorum. yerine,

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

ayrıca jQuery bağlı değildir bir çözüm kullanabilirsiniz performansını artırmak için: Bunu yapmak için, dokümanın beklemek biraz CSS dosyasını çağırmadan önce yüklenecek kaldır

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

Eğer stil <link> elemana #cssLink ekleyebilir ve aynısını yapmaya DOM kullanabilirsiniz:

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

Bu wo Eğer sayfasına stil uygulamadan önce

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

Bu şekilde 100K artı jQuery yük bağımlılığı kaldıracak şu şekildedir: uld size kod görünmesi.

GÜNCELLEME:

Bu ekran boyutu ziyade cihaz temelinde CSS kurallarını uygulamak da mümkündür.

@media queries'a bir göz attınız mı?