Webdesign réactif: le navigateur par défaut Android "pense" qu'il est plus grand qu'il ne l'est

J'ai la balise Meta suivante

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

et les règles CSS

@media all and (max-device-width: 640px) { ... }
@media all and (max-device-width: 480px) { ... }

Lorsque j'ouvre le site par Chrome sur mon téléphone, tout fonctionne comme prévu - les règles max-device-width: 480px sont utilisées. Mais quand j'ouvre le site par le navigateur par défaut d'Android 4, il utilise les règles max-device-width: 640px . Pouvez-vous expliquer un tel comportement?

2
ajouté édité
Vues: 1
Avec max-width , cela fonctionne comme prévu. Mais nous ne voulons pas afficher de design mobile lorsque l'utilisateur change la taille de la fenêtre du navigateur. Nous utilisons donc max-device-width
ajouté l'auteur fedor.belov, source
Oui, nous utilisons le même html/css pour tous les appareils. Donc, l'utilisateur de PC peut changer la largeur du navigateur. Lorsque la largeur de la fenêtre du navigateur est assez petite, le design mobile sera affiché ce qui est mauvais pour nos clients
ajouté l'auteur fedor.belov, source
Quand vous utilisez max-width , la résolution de l'écran n'a pas d'importance ... de toute façon cela n'explique pas le problème.
ajouté l'auteur fedor.belov, source
Eh bien ... Nous sommes des développeurs .. Nous ne sommes pas des clients. Personnellement j'utiliserais max-width
ajouté l'auteur fedor.belov, source
Avez-vous essayé avec max-width au lieu de max-device-width ?
ajouté l'auteur matewka, source
Vous voulez dire la taille de la fenêtre du navigateur sur les PC?
ajouté l'auteur matewka, source
Ne pouvez-vous pas supposer que 99,9% des écrans de PC sont au moins 1024px?
ajouté l'auteur matewka, source
Oui, mais pourquoi supposez-vous que les utilisateurs vont redimensionner leurs navigateurs?
ajouté l'auteur matewka, source
Je ne m'inquiéterais pas si l'utilisateur redimensionne son navigateur et s'attend à ce que le site ressemble à un ordinateur de bureau. Par exemple. essayez-vous de prévoir les plugins du navigateur de l'utilisateur et comment ils peuvent détruire la mise en page? Je parie que non. C'est la même chose avec le redimensionnement de la fenêtre. S'il vous plaît, référez-vous à thebestdesigns.com , examiner certains sites Web, redimensionner la fenêtre du navigateur et vous verrez que les développeurs ne se soucie pas de telle
ajouté l'auteur matewka, source

1 Réponses

essayez d'utiliser cette balise @media (max-width: 640px) {...} et @media (max-width: 480px) {...} ..

1
ajouté
pls vérifier mon commentaire ci-dessus - nous aimerions utiliser max-device-width au lieu de max-width
ajouté l'auteur fedor.belov, source
On dirait que le navigateur Android traite résolution de l'écran == largeur du périphérique
ajouté l'auteur fedor.belov, source
ajouté l'auteur Ahmad Ramli, source
c'est tout ce que je sais sur max-device-width
ajouté l'auteur Ahmad Ramli, source