Nexus 7 screen.width返回800，但媒体查询max-width：720px仍适用 [英] Nexus 7 screen.width returns 800 but media query max-width: 720px still applies

问题描述

我有一个Google Nexus 7平板电脑，用于测试一些响应式设计。在Javascript中， screen.width 按预期返回为800像素（原生分辨率）。

  @media only屏幕和（ max-width：720px）and（orientation：portrait）{
 .test {background：red;} 
} 
  

解决方案

Android目标密度缩放，以适应Android生态系统不同的屏幕密度。默认情况下，Android浏览器以中等屏幕密度为目标，尝试模拟元素的大小，就好像屏幕是MDPI屏幕一样。

使用。

I have a Google Nexus 7 tablet I'm using for testing some responsive designs. In Javascript, the screen.width returns as 800px, as expected (the native resolution).

How come the following media query is picked up by the tablet when the max width of the screen is > 720px?

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

解决方案

Android does target density scaling in order to accommodate the varying screen densities of the Android ecosystem. The Android browser targets a medium screen density by default, trying to emulate the size of elements as if the screen was an MDPI screen.

Using this website, you can see that the result of this scaling is that device-width is 601 px and device-height is 880 px on the Nexus 7. Therefore, it falls within your max-width: 720px declaration and the background appears red.

window.screen.width and .height always returns the actual screen size. You have to remember that the Viewport Size and the Screen Size are two different things altogether.

If you do not want this behavior, you may add target-densitydpi=device-dpi to your <meta name="viewport"> tag. This will disable the Android target density scaling: device-width and device-height will report the native screen resolution of the device.

More information about Android's target density scaling is available in the Android Developers' Documentation.

这篇关于Nexus 7 screen.width返回800，但媒体查询max-width：720px仍适用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！