Utiliser Modernizr pour tester des tablettes et des téléphones portables - Avis recherchés

Question

Je veux utiliser Modernizr pour détecter si un utilisateur est de consulter un site sur un ordinateur de bureau, une tablette ou un appareil mobile.

Mes premières premières pensées vont évidemment à vérifier les tailles d'écran qui devrait être suffisant pour les appareils mobiles et aussi pour les grands ordinateurs de bureau. Pour les tablettes, où la taille de l'écran peut également être équivalent à celui d'un petit bureau d'écran (1024 x 768) je testerais les événements tactiles ainsi.

À ce moment, je voudrais mettre l'accent sur mobile/tablette périphériques, comme jQuery mobile met sont, de grade. Je ne cherche pas à puiser dans tout périphérique mobile spécifique caractéristiques de simplement détecter desktop, tablette ou mobile et servir de l'INTERFACE utilisateur adaptée pour chaque en ajoutant des classes CSS en fonction des résultats du test.

Pensez-vous que cela est suffisant pour obtenir ce que je veux ou tu penses que je devrais être des tests pour d'autres capacités? Merci beaucoup à l'avance.

Answer 1

Cette question est un peu vieille mais je ne pouvais pas trouver de meilleure réponse quand je la cherchais sur Google.

La plupart des ordinateurs de bureau sont maintenant activés au toucher, il est donc inutile de les détecter.

Le meilleur moyen de les détecter est la taille de l'écran.

Avec Modernizr, vous pouvez utiliser if (Modernizr.mq('only all and (max-width: 480px)')) { ...}

Answer 2

Modernizr pouvez vérifier les événements tactiles

Pour tester si l'appareil est d'une tablette ou d'un téléphone ou d'ordinateur de bureau, je serais probablement se pencher plus vers l'utilisation des Agents Utilisateurs. Jetez un oeil à les scripts sur DetectMobileBrowsers.com

Modernizr simplement des tests pour savoir si ou non un navigateur prend en charge certaines fonctionnalités. Autant que je sache, il n'apparaît pas de test browser_type == mobile et des choses le long de ces lignes...

Aussi, jetez un oeil à yepnope, qui est un conditionnel de chargement de ressources de script (qui Modernizr a effectivement intégré dans celui-ci).

Answer 3

Vous pouvez utiliser l'extension suivante pour Modernizr: https://www.npmjs.org/package/mobile-detect

Ou bien (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.)