响应式CSS媒体查询错误

Question

为什么以下CSS适用于具有1280x768分辨率的Nexus 4？

@media
(max-width: 480px) and (orientation: portrait) {
    /* this shouldn't apply on Nexus 4 */
}

Answer 1

这可能有助于定位Nexus 4：

@media screen and (device-width: 384px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 2)

（http://cssmediaqueries.com/target/LG+Nexus+4.html）

我不知道是否

(orientation: portrait)

可以在大多数手机上使用，所以你可能想研究这个，因为我知道有一段时间iPhone不仅仅使用iPad了。

Answer 2

仅使用@media all或@media screen代替@media进行测试。

此处有更多媒体查询http://css-tricks.com/css-media-queries/