détecter périphérique en utilisant modernizr

Question

J'ai conçu une page qui détecte périphérique à l'aide de la largeur de l'appareil et basé sur ce qu'il charge les fichiers js et css respectés. Comment évaluer 3 conditions dans Modernizr et qui est la meilleure façon de détecter périphérique (bureau, mobile ou tablette)

<script type="text/javascript"> 
      Modernizr.load([ 
       { 
        test: Modernizr.mq('(min-device-width: 320px) and (max-device-width: 728px)'), 
        yep : ['mob.css', 'jquery.mobile-1.1.0.css', 'jquery.mobile-1.1.0.js'], 
        nope : 'pc.css' 
       } 
      ]); 

      if (!Modernizr.borderradius) { 
       $.getScript("jquery.corner.js", function() { 
        $("input").corner(); 
       }); 
      } 

      if(!Modernizr.required) { 
       $("#frmSearch").submit(function(){ 
        if($.trim($("#txtSearch").val().length) == 0){ 
         alert('Please, Enter some keyword'); 
         return false; 
        } 
       }); 
      } 
     </script> 

Answer 1

Si vous allez le faire en Modernizr, je dirais que ne pas essayer de écrire une condition à trois voies; écrire trois conditions vraies/fausses distinctes. Par exemple, plutôt que d'avoir une seule condition qui dit «bureau», «mobile» ou «tablette», vous devriez avoir trois conditions appelées «bureau», «mobile» ou «tablette», chacune étant vraie ou faux.

J'espère que cela répond à votre question.

Cependant, l'autre point que je soulèverais est comment dessiner la ligne entre ces types?

Il est facile de dire qu'un iPhone est un mobile et qu'un iPad est une tablette, mais qu'il existe des appareils de toutes tailles; où est le point de coupure qu'un mobile devient une tablette? Et qu'en est-il des tablettes qui peuvent se connecter à une unité de base pour devenir un ordinateur portable? Le problème que vous allez avoir ici est que les facteurs de forme sont très fluides; Vous n'aurez peut-être jamais une certitude quant à la catégorie à laquelle ils appartiennent. Il vaudrait peut-être mieux que votre site s'adapte dynamiquement à la résolution de l'écran en utilisant des requêtes CSS et CSS responsives.

Espérons que ça aide.