Detectar dispositivo y cambiar el archivo CSS - jQuery

Question

Mi objetivo principal aplicación web para teléfonos inteligentes y tengo que cambiar el archivo CSS según el dispositivo (si hay problemas en la interfaz de usuario tenga que pulsar ellos), y tengo la intención de intercambio CSS usando el siguiente jQuery. Solo quiero saber si es una buena práctica y buena en rendimiento.

<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. ¿Es la mejor práctica?

depende de lo que se piensa en como la mejor práctica, también lo es la mejor práctica en el contexto de su aplicación y su empresa. Una cosa que me hace pensar es: ¿Pueden garantizar que todas sus páginas usarán jQuery? Si es así, entonces creo que este es un buen enfoque para lograr lo que buscas. Una alternativa sería hacer este lado del servidor, que garantizaría el mejor rendimiento, pero puede haber otras razones por las que no desea hacer esto (tal vez no tenga acceso al código del lado del servidor, o si desea mantener la mayor parte del funcionalidad en manos de programadores de front-end).

2.Is bueno en el rendimiento?

La respuesta corta es no. Además de necesitar la carga útil de 100K + de jQuery para inyectar el CSS en la página. La forma en que ha abordado el problema en este momento es esperar a que se cargue toda la página (y todas las dependencias) antes de agregarle estilos. Esto creará un 'salto' notable entre cuando la página se muestra al principio (sin estilos) y cuando los estilos se cargan y todo se mueve.

Cargando el lado del servidor CSS se deshace de esto, pero creo que todavía puede hacer esto en la interfaz de usuario y mantener la mayoría de su base de código en JavaScript, lo que hará que sea más fácil de mantener. Con el fin de hacer esto, quitar el fragmento en el que espera a que el documento que se debe cargar antes de llamar a su archivo 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> 

Para mejorar aún más el rendimiento se puede utilizar una solución que no depende de jQuery, en lugar de

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

se podría añadir #cssLink al elemento de hoja de estilo <link> y utilizar el DOM para hacer lo mismo:

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

Este wo ULD que hacen mirada código como sigue:

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

De esta manera se retire la dependencia de la carga útil de más de 100K jQuery antes de poder aplicar sus hojas de estilo a la página.

ACTUALIZACIÓN:

También es posible aplicar reglas CSS en función del tamaño de la pantalla en lugar de dispositivo.

¿Ha tenido un vistazo a @media queries?