Utilisation de Modernizr pour tester la tablette et le mobile - Avis recherché
Je souhaite utiliser Modernizr pour détecter si un utilisateur consulte un site sur un ordinateur de bureau, une tablette ou un appareil mobile.
Mes premières réflexions initiales sont évidemment de vérifier les tailles d'écran qui devraient être suffisantes pour les appareils mobiles et aussi pour les ordinateurs de bureau plus grands. Pour les tablettes où la taille de l'écran pourrait également être égale à celle d'un petit écran de bureau (1024 x 768), je testerais également les événements tactiles.
En ce moment, je voudrais me concentrer sur les appareils mobiles/tablettes qui, comme le dit jQuery mobile, sont de classe A. Je ne cherche pas à exploiter des fonctionnalités spécifiques à un appareil mobile, il suffit de détecter le bureau, la tablette ou le mobile et de proposer une interface utilisateur personnalisée pour chacun en ajoutant des classes CSS en fonction des résultats du test.
Pensez-vous que cela suffit pour atteindre ce que je veux ou pensez-vous que je devrais tester d'autres capacités? Merci d'avance.
Modernizr peut vérifier les événements tactiles
Pour tester si l'appareil est une tablette ou un téléphone ou un ordinateur de bureau, je pencherais probablement davantage vers l'utilisation des agents utilisateurs. Jetez un œil aux scripts sur DetectMobileBrowsers.com
Modernizr teste simplement si un navigateur prend en charge certaines fonctionnalités. Pour autant que je sache, il ne semble pas tester browser_type == mobile et des trucs dans ce sens ...
Gardez à l'esprit que de nombreux PC de bureau modernes ont de nos jours des écrans tactiles, donc même la détection de la prise en charge tactile ne garantit pas qu'il s'agisse d'un appareil mobile ou d'une tablette.
Cette question est un peu ancienne mais je n'ai pas pu trouver de meilleure réponse quand je l'ai googlé.
La plupart des ordinateurs de bureau sont désormais activés par le toucher, donc la détection n'est pas pertinente.
La meilleure façon de les détecter est la taille de l'écran.
Avec Modernizr, vous pouvez utiliser if (Modernizr.mq('only all and (max-width: 480px)')) { ...}
Vous pouvez utiliser l'extension suivante pour Modernizr: https://www.npmjs.org/package/mobile-detect
Ou (sans Modernizr), vous pouvez utiliser Restive.JS pour ajouter une classe ".phone" ou ".tablet" à votre corps: http://docs.restivejs.com
(Recherchez "formfactor" en bas de la page.)