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

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

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

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

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

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

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

尼尔

Answer 1

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

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