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

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和其他具有320px最大宽度屏幕的mobiel设备。因此，基于上述情况，我不希望它在任何iPhone上选择横向模式吗？

任何想法如何添加到它来解决？

尼尔

Answer 1

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

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