[英]Nexus 7 screen.width returns 800 but media query max-width: 720px still applies
I have a Google Nexus 7 tablet I'm using for testing some responsive designs. 我有一台谷歌Nexus 7平板电脑用于测试一些响应式设计。 In Javascript, the
screen.width
returns as 800px, as expected (the native resolution). 在Javascript中,
screen.width
返回800px,如预期的那样(原始分辨率)。
How come the following media query is picked up by the tablet when the max width of the screen is > 720px? 当屏幕的最大宽度> 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. Android确实针对密度扩展,以适应Android生态系统不同的屏幕密度。 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.
默认情况下,Android浏览器以中等屏幕密度为目标,尝试模拟元素的大小,就像屏幕是MDPI屏幕一样。
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. 使用此网站 ,您可以看到此缩放的结果是Nexus 7上的
device-width
为601 px
, device-height
为880 px
。因此,它属于您的max-width: 720px
声明,背景显示为红色。
window.screen.width
and .height
always returns the actual screen size. window.screen.width
和.height
始终返回实际的屏幕大小。 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. 如果您不想要此行为,可以将
target-densitydpi=device-dpi
到<meta name="viewport">
标记。 This will disable the Android target density scaling: device-width
and device-height
will report the native screen resolution of the device. 这将禁用Android目标密度缩放:
device-width
和device-height
将报告device-height
本机屏幕分辨率。
More information about Android's target density scaling is available in the Android Developers' Documentation . 有关Android目标密度扩展的更多信息,请参阅Android开发人员文档 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.