La requête média ne fonctionne pas sur le navigateur mobile?

Question

Je travaille actuellement sur une version mobile d'un site Web qui fonctionne très bien dans les navigateurs par défaut comme Firefox & Chrome. Base est une mise en page fluide avec une requête de média pour une largeur maximum de 440px (@media screen et (max-width: 440px) pour le mode portrait cible

Les tailles de police changent dans les navigateurs par défaut avec d'autres paramètres comme Cependant, lorsque je teste le site sur mon téléphone HTC Android avec le navigateur par défaut, il affiche uniquement le style de largeur maximale 440 au lieu du style normal qui est basé sur une largeur de 480 px

Ce qui pourrait être le problème pour ce comportement? La version mobile peut être trouvée sur httpp: //www.seeyouzoeningouda.nl/m

N'a pas posté le CSS parce que je ne sais vraiment pas quelle partie du code pour vous montrer. Le cs s est basé sur le modèle standard de HTMl5 (www.html5boilerplate.com)

Answer 1

Les périphériques mobiles sont parfois visés par @media handheld. Essayez d'utiliser @media all au lieu de l'écran.

Answer 2

Quels appareils mobiles avez-vous utilisés pour les tests?
Si elles sont samsung galaxy s3 ou apple iphone 4, la résolution de leur périphérique a été doublée et, par conséquent, cela peut être à l'origine du dysfonctionnement des requêtes média.

Donc pour I-phone 4, essayez de doubler la largeur maximale de 480px à 960px et pour samsung galaxy s3 si vous doublez la largeur maximale de 360px à 720px en écrivant la requête média, cela pourrait fonctionner parfaitement.

par ex.
poche @media, écran et (max-width: 960px)
poche @media, écran et (max-width: 720px)

Je pense que cela pourrait vous aider à cibler le mode portrait.