html - example - w3schools media query css



Nexus 7 screen.width renvoie 800 mais la requête max media-width: 720px s'applique toujours (1)

Android cible la mise à l'échelle de la densité afin de prendre en compte les différentes densités d'écran de l'écosystème Android. Le navigateur Android cible par défaut une densité d'écran moyenne, en essayant d'émuler la taille des éléments comme si l'écran était un écran MDP.

En utilisant ce site Web , vous pouvez voir que le résultat de cette mise à l'échelle est que la device-width est de 601 px et que la device-height est de 880 px sur le Nexus 7. Par conséquent, elle tombe dans votre déclaration max-width: 720px .

window.screen.width et .height renvoie toujours la taille réelle de l'écran. Vous devez vous rappeler que la taille de Viewport et la taille de l' écran sont deux choses complètement différentes.

Si vous ne voulez pas ce comportement, vous pouvez ajouter target-densitydpi=device-dpi à votre <meta name="viewport"> . Cela désactivera la mise à l'échelle de la densité cible Android: la device-width device-height de l'appareil indiqueront la résolution d'écran native de l'appareil.

Plus d'informations sur la mise à l'échelle de la densité cible d'Android sont disponibles dans la documentation des développeurs Android .

J'ai une tablette Google Nexus 7 que j'utilise pour tester certains designs réactifs. En Javascript, le screen.width renvoie screen.width , comme prévu (la résolution native).

Comment se fait-il que la requête média suivante soit prise en charge par la tablette lorsque la largeur maximale de l'écran est> 720px?

@media only screen and (max-width: 720px) and (orientation: portrait) {
    .test{ background: red;}
}




media-queries