Détecter si un navigateur dans un appareil mobile (téléphone/tablette iOS/Android) est utilisé
Existe-t-il un moyen de détecter si un navigateur portable est utilisé (téléphone/tablette iOS/Android)?
J'ai essayé cela dans le but de faire un élément moitié moins large dans un navigateur sur un appareil de poche, mais cela ne fait pas de différence.
width: 600px;
@media handheld { width: 300px; }
Cela peut-il être fait et si oui comment?
Edit: de la page référencée dans la réponse de jmaes j'ai utilisé
@media only screen and (max-device-width: 480px).
6 réponses
Mise à jour (juin 2016): j'essaie maintenant de prendre en charge l'entrée tactile et la souris sur chaque résolution, car le paysage de l'appareil est en train de brouiller lentement les lignes entre ce que sont et ne sont pas les appareils tactiles. iPad Pros sont tactiles uniquement avec la résolution d'un ordinateur portable 13". Les ordinateurs portables Windows viennent maintenant fréquemment avec des écrans tactiles.
Autres réponses so similaires (voir autre réponse à cette question) peuvent avoir différentes façons d'essayer de comprendre quel type d'appareil l'utilisateur utilise, mais aucun des elles sont à toute épreuve. Je vous encourage à vérifier ces réponses si vous devez absolument essayer de déterminer l'appareil.
IPhones, pour un, ignorer la requête handheld (Source ). Et je ne serais pas surpris si d'autres smartphones le font aussi pour des raisons similaires.
La meilleure façon actuelle que j'utilise pour détecter un appareil mobile est de connaître sa largeur et d'utiliser la requête multimédia correspondante pour l'attraper. Ce lien répertorie quelques-uns des plus populaires. Une recherche rapide sur Google serait donnez-vous tous les autres dont vous pourriez avoir besoin, j'en suis sûr.
Pour plus de ceux spécifiques à l'iPhone (tels que Retina display), consultez ce premier lien que j'ai posté.
Détection des périphériques mobiles
Réponse connexe: https://stackoverflow.com/a/13805337/1306809
Il n'y a pas d'approche unique qui soit vraiment infaillible. Le meilleur pari est de mélanger et assortir une variété de trucs au besoin, pour augmenter les chances de détecter avec succès une plus large gamme d'appareils portables. Voir le lien ci-dessus pour quelques options différentes.
Ne détectez pas les appareils mobiles, optez plutôt pour des appareils stationnaires.
De nos jours (2016), il existe un moyen de détecter les points par pouce / cm / px qui semble fonctionner dans la plupart des navigateurs modernes (voir http://caniuse.com/#feat=css-media-resolution ). j'avais besoin d'une méthode pour faire la distinction entre un écran relativement petit, l'orientation n'avait pas d'importance, et un écran d'ordinateur fixe.
Parce que de nombreux navigateurs mobiles ne supportent pas cela, on peut écrire le code CSS général pour tous les cas et l'utiliser exception pour les grands écrans:
@media (max-resolution: 1dppx) {
/* ... */
}
Windows XP et 7 ont le réglage par défaut de 1 point par pixel (ou 96dpi). Je ne connais pas d'autres systèmes d'exploitation, mais cela fonctionne très bien pour mes besoins.
Edit: dppx ne semble pas fonctionner dans Internet Explorer.. utilisez (96) dpi à la place.
Je sais que c'est un vieux fil mais j'ai pensé que cela pourrait aider quelqu'un:
Les appareils mobiles ont une hauteur supérieure à la largeur, au contraire, les ordinateurs ont une largeur supérieure à la hauteur. Par exemple:
@media all and (max-width: 320px) and (min-height: 320px)
Donc cela devrait être fait pour chaque largeur je suppose.
Voici comment je l'ai fait:
@media (pointer:none), (pointer:coarse) {
}
Je crois qu'un moyen beaucoup plus fiable de détecter les appareils mobiles est de regarder le navigateur.userAgent chaîne. Par exemple, sur mon iPhone la chaîne de l'agent utilisateur est:
Mozilla / 5.0 (iPhone; CPU iPhone OS 10_3_2 comme Mac OS X) AppleWebKit/603.2.4 (KHTML, comme Gecko) Version/10.0 Mobile/14f89 Safari/602.1
Notez que cette chaîne contient deux mots clés révélateurs: iPhone et Mobile. D'autres chaînes d'agent utilisateur pour les périphériques que je n'ai pas sont fournies à:
Https://deviceatlas.com/blog/list-of-user-agent-strings
En utilisant cette chaîne, j'ai défini une variable booléenne javascript bMobile sur mon site web sur true ou false en utilisant le code suivant:
var bMobile = // will be true if running on a mobile device
navigator.userAgent.indexOf( "Mobile" ) !== -1 ||
navigator.userAgent.indexOf( "iPhone" ) !== -1 ||
navigator.userAgent.indexOf( "Android" ) !== -1 ||
navigator.userAgent.indexOf( "Windows Phone" ) !== -1 ;