Nexus 7 screen.width返回800,但媒体查询max-width:720px仍然适用

Question

我有一台谷歌Nexus 7平板电脑用于测试一些响应式设计.在Javascript中,screen.width返回为800px,如预期的那样(原始分辨率).

当屏幕的最大宽度> 720px时,平板电脑如何选择以下媒体查询？

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

Answer 1

Android确实针对密度扩展,以适应Android生态系统不同的屏幕密度.默认情况下,Android浏览器以中等屏幕密度为目标,尝试模拟元素的大小,就像屏幕是MDPI屏幕一样.

使用这个网站,你可以看到,这个比例的结果是,device-width是601 px和device-height是880 px对的Nexus 7.因此,它属于你的内max-width: 720px声明和背景显示为红色.

window.screen.width并.height始终返回实际的屏幕尺寸.你必须记住,视口大小和屏幕大小完全是两个不同的东西.

如果您不想要此行为,可以添加target-densitydpi=device-dpi到您的<meta name="viewport">代码中.这将禁用Android的目标密度缩放:device-width和device-height将报告设备的原始屏幕分辨率.

有关Android目标密度扩展的更多信息,请参阅Android开发人员文档.