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 按预期返回 800px(原始分辨率).

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

@media only screen and (max-width: 720px) and (orientation: Portrait) {.test{ 背景:红色；}}

解决方案

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屋！