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

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) {

它在宽度小于320px的桌面上选择浏览器，在纵向上选择iPhone4，但在横向上选择iPhone4。当然，这不应该选择iPhone 4的景观？

根据我的理解，第一部分选择宽度小于320px的屏幕。

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

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

第四部分与前两部分相同，但没有双倍像素密度，因此应该选择最大宽度为320px的iPhone、3gs和其他移动设备。因此，基于以上原因，我不期望它在任何iPhone上选择横向模式？

有什么想法可以添加到其中来解决这个问题吗？

尼尔

Answer 1

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

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