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

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

J'ai essayé cela avec l'objectif d'en faire un élément de la moitié de sa largeur dans un navigateur sur un ordinateur de poche de l'appareil, mais il ne fait pas de différence.

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

Peut-il être fait et si oui, comment?

edit: à Partir de la page désignée dans jmaes réponse j'ai utilisé

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

L'objectif est de détecter les appareils mobiles, ou avez-vous besoin pour être en mesure de distinguer entre les appareils portatifs et les tablettes?
L'objectif est de détecter n'importe quel appareil mobile.
Pour détecter si l'écran tactile: stackoverflow.com/questions/11387805/touchscreen-media-queries , changement d'orientation: stackoverflow.com/questions/13803838/...

InformationsquelleAutor seron | 2013-02-18

css media-queries

28

Mise à jour (juin 2016): j'essaie maintenant de l'appui touche entrée de la souris et sur chaque résolution, puisque le dispositif paysage est lentement en brouillant les lignes entre ce que les choses sont et ne sont pas les appareils tactiles. iPad Pros sont en contact uniquement avec la résolution d'un 13" ordinateur portable. Windows ordinateurs portables sont désormais viennent souvent avec des écrans tactiles.

D'autres similaires AFIN de réponses (voir autre réponse sur cette question) peut avoir différentes façons d'essayer de comprendre à quel type de périphérique de l'utilisateur à l'aide, mais aucun n'est infaillible. Je vous invite à consulter ces réponses si vous avez absolument besoin pour essayer de déterminer l'appareil.

iPhones, pour l'un, ignorer le handheld requête (Source). Et je ne serais pas surpris si d'autres smartphones à faire, aussi, pour les mêmes raisons.

La meilleure façon que j'utilise pour détecter un appareil mobile est de connaître sa largeur et de l'utilisation de la médias correspondants requête pour l'attraper. Ce lien il y a une liste de certains des plus populaires. Une rapide recherche sur Google donnerait tout vous autres, vous pourriez avoir besoin, j'en suis sûr.

Pour plus d'iPhone spécifiques (telles que l'affichage de la Rétine), découvrez ce premier lien que j'ai posté.
- Non, tant que les appareils d'aujourd'hui ont la même ou une résolution encore plus élevée que les moniteurs de bureau, résolution de l'écran n'est pas la meilleure façon.
- Même si les écrans des appareils peut avoir plus de pixels que de de bureau d'aujourd'hui, ils sont réduits à "CSS" taille " par le biais de "pixels", c'est à dire la taille déclarée et utilisée dans les CSS et les requêtes de média est n fois plus faible que la physique, la taille du pixel (avec n étant de 1, 2, 3...) E. g. voir mydevice.io/périphériques les médias De cours requêtes à l'aide de la taille de l'écran pour détecter le type d'appareil est lourd, mais il n'y a pas beaucoup d'autres options partout malheureusement...
- Selon developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/..., la liste que vous avez fourni à l'aide de la n'est plus garanti au travail device-width et device-height fonctionnalités de médias
- Vrai, mais tout d'abord, le très fiable CSS astuces site montre encore que webkit méthode valable dans de nombreux appareils, y compris Iphone-10 et beaucoup de nouveaux téléphones Galaxy! (css-tricks.com/snippets/css/media-queries-for-standard-devices). Mais le plus important, la soi-disant "plus standard", "pixels" ne semble pas fonctionner dans les iphones que j'ai essayé. Il semblerait donc que, si (comme moi) vous avez VRAIMENT besoin de faire d'une partie des compensations pour le mobile des cas, le webkit méthode est une Aubaine! C'est, bien sûr, jusqu'à ce qu'il n'est pas 🙁
InformationsquelleAutor jamesplease
8

Détection des périphériques mobiles

Liées réponse: https://stackoverflow.com/a/13805337/1306809

Il n'y a pas d'approche unique qui est vraiment à toute épreuve. Le meilleur pari est de mélanger et assortir une variété de tours que nécessaire, afin d'augmenter les chances de succès de la détection d'un plus large éventail d'appareils de poche. Voir le lien ci-dessus pour quelques options différentes.
- Haha, comment bizarre que nous ne pouvons pas détecter si l'utilisateur dispose d'un écran tactile ou pas!
- ouais, ça semble bizarre. Pour rendre les choses plus intéressantes, quelques nouvelles de Windows ordinateurs portables traditionnels, des ordinateurs avec écrans tactiles des. D'autres appareils ont une haute résolution et sont de l'écran tactile, comme le plus grand de l'iPad Pro. Je dirais que la meilleure pratique est aujourd'hui à l'appui de tout sur chaque résolution.
InformationsquelleAutor Matt Coughlin
7

Ne pas détecter les appareils mobiles, allez à l'arrêt à la place.

De nos jours (2016) il y a 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 établir une distinction entre un écran relativement petit, l'orientation n'a pas d'importance, et l'arrêt de l'écran d'ordinateur.

Parce que beaucoup de navigateurs mobiles ne prennent pas en charge ce, on peut écrire le général code css pour tous les cas et l'utilisation de cette exception pour les grands écrans:
```
@media (max-resolution: 1dppx) {
    /* ... */
}
```
À la fois Windows XP et 7 ont de la valeur par défaut de 1 point par pixel (ou 96 ppp). Je ne sais pas pour les autres systèmes d'exploitation, mais cela fonctionne vraiment bien pour mes besoins.

Edit: dppx ne semble pas fonctionner dans Internet Explorer.. l'utilisation (96)ppp au lieu.
- Vous aurez de si l'utilisateur est par exemple à l'aide d'un moniteur 4k sous windows 10 et ont augmenté l'INTERFACE utilisateur de la taille.
- je ne voudrais pas faire confiance à cette
InformationsquelleAutor LGT
7

Voici comment je l'ai fait:
```
@media (pointer:none), (pointer:coarse) {
}
```
Basé sur https://stackoverflow.com/a/42835826/1365066
- ne fonctionne pas toujours. Je suis sur un Lenovo Yoga 2 Pro (écran tactile), externe, écran full hd, Win10 1803. sur Firefox 62: œuvres (div vert), sur Chrome 69: il n'a pas (div est rouge) donc encore une fois juste essayer d'obtenir un lucky punch avec cette solution de contournement :/
InformationsquelleAutor GrayFace
3

Je sais que c'est un vieux thread mais j'ai pensé que cela pourrait aider quelqu'un:

Appareils mobiles ont plus de hauteur que de largeur, au contraire, les ordinateurs ont une plus grande largeur que la hauteur. Par exemple:
```
@media all and (max-width: 320px) and (min-height: 320px)
```
donc, qui aurait à faire pour chaque largeur, je suppose.
- Ne fonctionne pas pour les appareils mobiles en mode paysage bien que.
- De Plus, les fenêtres de navigateur peut être redimensionnée.
InformationsquelleAutor m33x
2

Je crois que d'une façon beaucoup plus fiable pour 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; PROCESSEUR de l'iPhone OS 10_3_2 comme Mac OS X) AppleWebKit/603.2.4 (KHTML, like Gecko) Version/10.0 Mobile/14F89 Safari/602.1

Noter que cette chaîne contient deux révélateurs mots-clés: iPhone et Mobile. D'autres chaînes d'agent utilisateur pour les appareils que je n'ai pas sont disponibles à l'adresse:

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

À l'aide de cette chaîne, j'ai créé un script JavaScript variable Booléenne bMobile sur mon site web soit vrai ou faux 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 ;
```
- Cela fonctionne OK... si vous n'en avez que sur iPhone, Android et Windows Phone. Mais il y a toute les autres classes de périphériques là, par exemple, ne pas oublier de Blackberry et Opera Mini utilisateurs. Opera Mini représentent à eux seuls quelque 350 millions d'utilisateurs. Aussi, âgés de téléphone des utilisateurs ne correspond pas à ces modèles et ces sont les appareils qui ont absolument besoin d'un mobile-expérience spécifique. Le laid réalité est que cette région a obtenu suffisamment complexe pour que les solutions simples ne fonctionnent plus.
- Oui, vous avez bien entendu correct, @RonanCremin, mais vous pouvez ajouter n'importe quelle autre chaîne de l'agent utilisateur des mots clés que vous le souhaitez. (Et je me rends compte que mon code qui pourrait être plus efficace à l'aide d'une expression régulière.) Je suis également d'avis que de telles situations sont souvent plus complexes qu'ils apparaissent en premier.
InformationsquelleAutor Jesse Heines

Vous devez vous connecter pour publier un commentaire.