Détection de la taille de l'écran physique en fonction de l'agent utilisateur en PHP/javascript

Question

Il existe donc des moyens de détecter les navigateurs "mobiles" et les tailles d'écran à l'aide de javascript et de php, mais la taille de l'écran est toujours exprimée en pixels et, de nos jours, le terme "mobile" peut signifier n'importe quoi.

Je veux pouvoir connaître la taille de l'écran d'un appareil lorsqu'il est mobile, étant donné que les tablettes sont omniprésentes. La raison en est que je veux sélectionner une feuille de style pour les appareils avec de petits écrans et utiliser par défaut la feuille de style normale pour tous les autres. Par exemple, je veux qu'un iPad, un kindle fire, un hp touchpad etc. affichent la feuille de style normale mais je veux une feuille de style différente pour les téléphones portables ou tout appareil qui a un écran de la taille d'une main humaine.

Je suppose qu'il n'existe pas de solution pour faire cela, mais peut-être que quelqu'un a trouvé un meilleur moyen ou qu'il connaît une base de données qui contient les dimensions des écrans

peut-être existe-t-il un moyen de déterminer la densité des pixels et d'appliquer ensuite la largeur/hauteur de l'écran en pixels à cette

Answer 1

Je pense que c'est une très bonne question. La situation actuelle n'est pas satisfaisante : sur les tablettes de 10 pouces, on vous propose par défaut un site "mobile" géant en une seule colonne, qui gaspille de l'espace, alors que la version de bureau aurait été tout à fait satisfaisante.

Malheureusement, comme l'a découvert John Hunt, même WURFL ne donne pas la taille physique exacte de l'écran.

Une solution de contournement consiste à supposer que si les dimensions x ou y sont inférieures à 768 pixels, vous êtes sur un téléphone(*) et que la version "mobile" à colonne unique de votre site est servie par défaut.

Vous devez toujours permettre au visiteur de choisir entre le mobile et l'ordinateur de bureau. Mieux encore, appelez simplement la version "monocolonne" ou "slim-width" de votre site afin d'éviter les erreurs d'appellation.

(*) Pourquoi 768 pixels ? Parce que toutes les tablettes de 10 pouces de quelque importance sont au moins 1024x768 ou 1280x800, alors que même les téléphones avec de grands écrans comme l'iPhone 5 ou le HTC HD5 ont des largeurs inférieures à 768 pixels (iPhone 5 - 640x1136, HTC HD5 1280x720). Cela ne fonctionnera probablement pas sur les écrans géants de Samsung, mais sur ces appareils, avoir la version de bureau servie par défaut n'est pas aussi ennuyeux.

Answer 2

Lorsque l'on utilise wordpress, la fonction wp_is_mobile a le même problème car elle active le drapeau "mobile" pour les tablettes et les téléphones. Mon problème est que je veux que les téléphones obtiennent une page limitée sans mon slider d'image en haut de page pour accélérer le téléchargement du site. Les tablettes ont généralement un accès wifi plus rapide que le 3G ou effectivement plus lent que le wifi 4g.

Le thème wordpress responsive, Customizr, que j'utilise utilise l'auto-adaptation twitter bootstrap, mais fonctionne encore trop lentement sur les téléphones avec de grandes pages d'images. La question pour mon site n'est donc pas seulement la taille ou la résolution de l'écran, mais la vitesse d'affichage des données et de l'écran.

Rocco Aliberti, dans ce forum sur le site de themesandco, a fait une suggestion utile en combinant un plugin de détection de navigateur qui établit une fonction is_tablet, puis en la combinant avec la fonction intégrée wp_is_mobile de wordpress pour obtenir "wp_is_mobile() && !is_tablet()" - c'est-à-dire que l'appareil est mobile et qu'il n'est pas une tablette. http://www.themesandco.com/support-forums/topic/jetpack-mobile-issue/#post-23308

Answer 3

http://wurfl.sourceforge.net/nphp/

On dirait que vous puede obtenir ces informations à partir de l'API WURFL cool !

Answer 4

La bonne réponse, je pense, est d'utiliser une approche de mise en page réactive, car vous n'arriverez jamais à l'adapter à tous les appareils (il y en a des centaines de nouveaux chaque jour ).

Answer 5

Vous pouvez utiliser des frameworks comme Bootstrap qui affichent/masquent les colonnes ou les données en fonction de la résolution de l'écran. Cela fonctionne bien en ce qui concerne l'affichage.

Mais idéalement, vous voudriez aussi que votre langage de script le sache afin qu'il ne traite/exécute pas certaines données qui ne seront pas affichées par bootstrap.

Pour l'instant, l'agent de navigation ne fournit pas de résolution d'écran. Cette option devrait être activée, car les sites web modernes doivent être adaptés au moins aux mobiles, tablettes et ordinateurs les plus répandus.

Voici ma liste de souhaits pour les futures versions de l'implémentation de HTTP/W3c/Browser.