css - 媒体查询宽度问题

Question

也许这是一个新手问题，但我对媒体查询有点困惑。

我有一个 1920x1080 的 nexus 5，我正在尝试根据宽度更改 body 的背景。

这是代码

body {
    background: black;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
body {
    background: red;
}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
body{
    background: yellow;
}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    body{
        background: green;
    }
}

在我的 nexus 5 上打开这个元素，背景是红色而不是黄色，为什么？我缺少什么？我已经上传到这里http://untruste.altervista.org/Try.html

Answer 1

因为 1920x1080 像素不是您设备的实际分辨率而是渲染分辨率，移动设备的实际分辨率约为 360x480，这就是为什么在添加带视口(viewport)的元数据后屏幕变黑的原因。您的浏览器显示您的页面的分辨率可能在 768 到 992 像素之间。有很多事情可以说，这里有一篇关于它的文章:

http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

因此您可以定位移动设备默认提供的分辨率(这不是我最喜欢的选项)，或者您可以添加带有视口(viewport)的元标记(因此强制它们显示页面以显示真实分辨率并且不渲染像素)并定位设备的真实分辨率，因此根据您当前的查询，手机将具有黑色背景，红色或更大的平板电脑在横向模式下将具有黄色，而大多数台式机将具有绿色背景