css - 桌面屏幕和移动屏幕的媒体查询

Question

我有这个媒体查询：

@media only screen
and (max-width : 320px),

only screen
and (max-device-width : 320px)
and (min-device-pixel-ratio : 2),

only screen
and (max-device-width : 320px)
and (-webkit-min-device-pixel-ratio : 2),

only screen
and (max-device-width : 320px) {

它选择宽度小于 320 像素的桌面上的浏览器，iphone 4 的纵向，但它也选择 iphone 4 的横向。当然这不应该选择 iPhone 4 的横向？

据我了解，第一部分选择宽度小于 320 像素的屏幕。

第二部分与第二部分相同，但带有 webkit 供应商前缀

第三部分选择宽度小于 320 像素但像素密度为双倍的移动设备上的屏幕（本例中为 iPhone 4/4s）

第四部分与前两部分相同，但没有双倍像素密度，因此应选择 iPhone 3gs 和其他具有 320 像素最大宽度屏幕的手机设备。因此，基于上述情况，我不希望它在任何 iPhone 上选择横向模式？

任何想法如何添加到它来解决这个问题？

尼尔

Answer 1

您应该添加orientation : landscape到您的 CSS，如下所示：

@media only screen
and (max-device-width : 320px)
and (orientation : landscape) {
    /* Styles */
}