Navigateur androide signalant une taille d'écran incorrecte?

Question

Je développe un site Web mobile, et j'ai rencontré un problème intéressant.

Je teste sur mon bureau, ainsi que sur mon Motorola Droid (Android 2.2). J'ai des requêtes médias configurées pour charger 3 feuilles de style différentes (largeur 320px, largeur 480px et largeur 640px). J'ai remarqué que mon Droid charge la feuille de style 320px malgré un écran de 480x854px. J'ai mis en place un petit JS pour savoir quelle est la largeur de l'écran, et il rapporte 320px.

Le navigateur Android s'exécute-t-il dans MDPI sur les écrans HDPI? Il est correctement mis à l'échelle 320px pour remplir l'écran, mais je suis un peu confus pourquoi cela se produit.

En outre, j'ai < meta name = "viewport" content = "largeur = périphérique-largeur" ​​> sur ma page, ce n'est donc pas le problème.

Answer 1

De nombreux OEM ont choisi de définir leurs dimensions par défaut de la fenêtre d'affichage du navigateur en fonction de celles de l'iPhone (ou des résolutions similaires) malgré une résolution totalement différente. Apple a eu un problème similaire avec la sortie de «l'écran rétine» sur l'iPhone 4 où la feuille de spécifications indique 640px à travers, mais screen.width retournera 320px quand il est défini. Comme @omermuhammed mentionné, basez votre logique sur screen.width, les requêtes CSS @media ET/OU la détection des périphériques en utilisant WURFL ou DeviceAtlas.

L'article suivant peut également être intéressant pour aider à clarifier la question:

Un pixel est pas un pixel est pas un pixel par @ppk http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

Answer 2

Je ne sais pas dans le contexte du navigateur Android, mais j'ai vu des combinés où Android a rapporté la mauvaise taille d'écran. Je recommanderais de baser votre logique sur une combinaison de chaîne d'agent utilisateur ET de résolution d'écran. De cette façon, vous pouvez détecter ce combiné et gérer différemment, et utiliser des mécanismes normaux avec les autres.

Answer 3

Je l'ai remarqué quelques problèmes à obtenir screen.width et screen.height sur Android 4.2.

• Les cotes ne sont pas mises à jour pour refléter l'orientation de l'appareil.

Vous pouvez corriger cela si vous souhaitez d'abord obtenir l'orientation, puis changer les valeurs en conséquence.

http://menacingcloud.com/?c=orientationScreenWidth

http://davidwalsh.name/orientation-change (bon usage de matchMedia)

• OS éléments d'interface utilisateur sont soustraites des dimensions de l'écran du dispositif réel.

E.g. Nexus 7 écran est de 1280x800, 1205x800 est signalé. 75px pour les boutons de l'OS.

• Idéalement (à mon avis), les valeurs devraient être rapportées en pixels CSS, pas en pixels.

E.g. Nexus 7, Viewport CSS est défini sur 600px en mode portrait, mais screen.width rapporte 800px. Donc, DPR est d'environ 1.33

Dans l'ensemble, screen.width et screen.height ne sont pas très fiables (iOS a également des problèmes d'orientation).

J'espère pouvoir rééditer cette réponse avec plus de détails bientôt.