css - 响应式 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仅使用or@media screen而不是进行测试@media。

更多媒体查询在这里http://css-tricks.com/css-media-queries/