web-dev-qa-db-fra.com

Les requêtes multimédia ne se comportent pas comme prévu sur Android

J'ai 4 questions aux médias. Les 1er, 3ème et 4ème travaux, mais le 2ème ne semble pas s'activer.

Pourquoi la 480x720 (deuxième requête multimédia) utilise-t-elle par défaut la première requête multimédia?

@media screen and (max-width: 320px) and (orientation: portrait) { body{background:#F0F;} }
@media screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait) { body{background:#F00;} }
@media screen and (max-width: 480px) and (orientation: landscape) { body{background:#0F0;} }
@media screen and (min-width: 481px) and (max-width: 800px) and (orientation: landscape) { body{background:#FF0;} }

Ce qui est attendu:

1st Media Query CSS Output2nd Media Query CSS Output3rd Media Query CSS Output4th Media Query CSS Output

Qu'est-ce qui se passe réellement:

2nd Media Query fails1st Media Query passes3rd Media Query passes4th media query passes

Pourquoi la 480x720 (deuxième requête multimédia) utilise-t-elle par défaut la première requête multimédia?

androidcsscss3media-queries
14
Xavier

Je pense que vous devez faire une détection de résolution de périphérique dans votre requête multimédia le long des lignes de 

@media (-webkit-min-device-pixel-ratio: 1.5),  
       (-o-min-device-pixel-ratio: 3/2),  
       (min--moz-device-pixel-ratio: 1.5),  
       (min-device-pixel-ratio: 1.5) {  
       /* high resolution styles */  
}

Consultez l'excellent article de David Calhoun sur les meilleures pratiques en matière de téléphonie mobile .

9
DyeA

Je suis un débutant sur Android et CSS.

J'ai résolu le problème en ne donnant pas la taille réelle d'Android avec une seule ligne dans l'en-tête de mon fichier index.html:

<meta name="viewport" content="width=device-width" />

A partir de là, mes fichiers CSS ont fait ce que je pensais!

24
JohanO

Donc, après des recherches approfondies, je suis arrivé à cette conclusion, les téléphones Android qui disent qu'ils sont 480px par 720px (800px ou 854px) ne sont en fait pas, ils utilisent une densité d'écran supérieure pour rendre les éléments plus volumineux et donc réellement à 320px par XXX , mais l'utilisateur peut modifier la résolution à une valeur inférieure s'il le souhaite. La raison pour laquelle la requête média ne fonctionnait pas était que les tailles n'étaient pas pertinentes pour le périphérique en question.

Si vous utilisez le SDK, la densité de l’écran a été réduite à 160 pour permettre une largeur de 480 pixels.

Et je peux confirmer que j'ai testé cela sur le SDK et 2 combinés.

Remarque: mon expérience personnelle a peut-être été différente pour d'autres utilisateurs

12
Xavier

J'avais les mêmes problèmes lorsque je travaillais sur une application Cordova pour plate-forme Android. Grâce à la dernière réponse, j'ai essayé de savoir où étaient les différences entre ma requête multimédia et la largeur de l'écran des appareils.

J'ai d'abord essayé:

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

Pour apparier des appareils tels que HTC Desire HD | Samsung Galaxy S. Mais je devais aussi faire des corrections spécifiques pour le Samsung Galaxy Note, alors j'ai utilisé:

@media only screen and (min-device-width: 481px) { ... }

Mais ces résolutions, comme dit précédemment, ne sont pas vraiment utilisées comme cela dans la vue Web, la densité de pixels a les valeurs changées.

Je voulais donc savoir combien de pixels de largeur étaient reconnus dans DHD et SGS, puis dans SGN:

window.innerWidth

Pour les téléphones d'une largeur de 480px, j'avais en fait reconnu 320px. Pour le Galaxy Note à 800 pixels, je n'avais reconnu que 500 pixels. Quand j'ai vu cela, j'ai ajusté mes requêtes de médias et cela a fonctionné.

7
jcbee

mon expérience de test est 320px (max-device-width) x 480px (max-device-width) dans. vue de portrait. Mais selon le navigateur mobile que j'utilise, la largeur maximale peut aller jusqu'à 850 pixels! Opera mobile utilise 850px par défaut comme largeur maximale, même s'il se trouve sur un appareil d'une largeur maximale de périphérique de 320px. Mieux encore; le navigateur Andriod intégré à cet appareil a une largeur maximale par défaut de 550 pixels. Par défaut, Dolphin a la même largeur maximale, 550px. Je ne teste généralement pas sur FireFox mobile, mais comme il s’agit d’un navigateur basé sur gecko comme Opera, je ne serais pas surpris qu’il tombe dans la plage des 850px. Est-ce que quelqu'un le sait ou l'a testé?

j'utilise généralement une requête multimédia à 3 conditions pour adresser des périphériques 320 X 480.

@media all and (max-width:850px) and (max-width:550px) and (max-device-width:320px) {..}

aussi je place habituellement cette balise META dans mon en-tête sur le code pageenter principal ici

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Ce qui suit n'a pas semblé m'aider, c'est à ce moment-là que j'ai fait d'autres recherches et compris l'information ci-dessus. <meta name="viewport" content="width=device-width" /> J'espère que cela aidera quelqu'un d'autre.

2
kevinB

Étant donné que les téléphones cellulaires sont un trou noir de confusion en matière de résolution, il faut leur dire de s'identifier. Vous devez également définir la mise à l'échelle sur 1 et supprimer la mise à l'échelle de l'utilisateur. Lorsque je mets cela dans mon code, cela me convient parfaitement. 

Insérez cet extrait dans l'en-tête de votre code HTML sur la ligne située sous la balise <meta character...>.

<!-- Check Device Width so Media Queries will work -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
1
richardsonae
  1. Convertissez toutes les valeurs px en valeurs em en les divisant par 16 (ainsi 16px deviendra 1 em). Cela garantit que la taille des proportions est correcte, quelle que soit la police utilisée.
  2. Ajoutez à votre méta-fenêtre: target-densitydpi=medium-dpi. Cela garantit que les tailles em- se comportent de la même manière sur tous les périphériques (la plupart?)
0
ToBe_HH