web-dev-qa-db-fra.com

Détecter si un navigateur dans un appareil mobile (téléphone iOS / Android / tablette) est utilisé

Existe-t-il un moyen de détecter si un navigateur de poche est utilisé (téléphone/tablette iOS/Android)?

J'ai essayé cela dans le but de rendre un élément deux fois moins large dans un navigateur sur un appareil de poche, mais cela ne fait aucune différence.

width: 600px;
@media handheld { width: 300px; }

Peut-il être fait et si oui comment?

edit: De la page référée dans la réponse de jmaes j'ai utilisé

@media only screen and (max-device-width: 480px).

cssmedia-queries
40
seron

Mise à jour (juin 2016) : J'essaie maintenant de prendre en charge la saisie tactile et la souris pour chaque résolution, car le paysage des appareils estompe lentement les frontières entre les éléments. et ne sont pas des appareils tactiles. Les iPad Pro ne sont tactiles qu'avec la résolution d'un ordinateur portable 13 ". Les ordinateurs portables Windows sont désormais dotés d'écrans tactiles.

D'autres SO réponses similaires (voir autre réponse à cette question)) pourraient avoir différentes façons de déterminer le type de périphérique utilisé par l'utilisateur, mais aucun d'eux n'est infaillible. J'encourage vous devez vérifier ces réponses si vous devez absolument essayer de déterminer le périphérique.

les iPhones, pour leur part, ignorent la requête handheld ( Source ). Et je ne serais pas surpris si les autres smartphones le faisaient aussi, pour des raisons similaires.

Le meilleur moyen que j'utilise actuellement pour détecter un appareil mobile est de connaître sa largeur et d'utiliser le requête multimédia correspondante pour l'attraper. Ce lien énumère quelques-uns des plus populaires. Une recherche rapide sur Google vous en donnerait d'autres, j'en suis sûr.

Pour plus de ceux spécifiques à l'iPhone (tels que l'affichage Retina), consultez le premier lien que j'ai posté.

28
jamesplease

Détection des appareils mobiles

Réponse associée: https://stackoverflow.com/a/13805337/1306809

Aucune approche unique n'est vraiment infaillible. Le mieux est de mélanger et assortir une variété de trucs au besoin, pour augmenter les chances de détecter avec succès une gamme plus étendue de périphériques de poche. Voir le lien ci-dessus pour quelques options différentes.

8
Matt Coughlin

Voici comment je l'ai fait:

@media (pointer:none), (pointer:coarse) {
}

Basé sur https://stackoverflow.com/a/42835826/1365066

8
GrayFace

Ne détectez pas les appareils mobiles, optez plutôt pour les appareils fixes.

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 importait peu et un écran d'ordinateur fixe.

Parce que de nombreux navigateurs mobiles ne le supportent pas, on peut écrire le code CSS général pour tous les cas et utiliser cette exception pour les grands écrans:

@media (max-resolution: 1dppx) {
    /* ... */
}

Windows XP et 7 ont le paramètre par défaut de 1 point par pixel (ou 96 ppp). Je ne connais pas les autres systèmes d'exploitation, mais cela fonctionne très bien pour mes besoins.

Éditer: dppx ne semble pas fonctionner dans Internet Explorer .. utilisez plutôt (96) dpi.

7
LGT

Je sais que c'est un vieux fil, mais je pensais que cela pourrait aider quelqu'un:

Les appareils mobiles ont une hauteur supérieure à la largeur, alors que les ordinateurs ont une largeur supérieure. Par exemple:

@media all and (max-width: 320px) and (min-height: 320px)

donc je suppose que cela devrait être fait pour chaque largeur.

2
m33x

Je pense qu’un moyen beaucoup plus fiable de détecter les appareils mobiles consiste à consulter la chaîne navigator.userAgent. Par exemple, sur mon iPhone, la chaîne d'agent d'utilisateur est la suivante:

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: iPhone et Mobile. D'autres chaînes d'agent d'utilisateur pour les périphériques que je n'ai pas sont fournies à:

https://deviceatlas.com/blog/list-of-user-agent-strings

À l'aide de cette chaîne, j'ai défini la valeur true ou false de la variable bMobile JavaScript bMobile sur mon site Web à l'aide du 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 ;
2
Jesse Heines