iphone - iphone portrait、landscape 和 ipad portrait 的 3 个媒体查询

Question

我尝试了 width 和 device-width 的不同组合，但在横屏的 iPhone 上，此代码永远不会将背景变为红色；

当我有超过 1 个媒体查询时，我遇到了问题。看这个JSfiddle example除非您删除最后一个媒体查询，否则 div 背景永远不会是绿色

这就是我想要的 3 个不同的媒体查询目标:

1. both smartphones and tablets(portrait only). This will be where I have all my generic styles for responsive layout
2. width: 320px - 479px - this will apply to small screens, such as iphone in portrait only
3. width: 480px - 640px - this will apply to larger screens such as iphone in landscape and ipad in portrait. Not ipad in landscape.

请注意，这是针对 HTML 电子邮件的，因此无法使用 JS。

@media only screen and (max-width: 640px) {
    body { padding: 10px !important }
}
/* Small screen */
@media only screen and (min-device-width: 320px) and (max-device-width: 479px) {
    body { background: blue !important }
}
/* iPhone landscape and iPad portrait */
@media only screen and (max-device-width: 480px) and (max-device-width: 640px) {
    body { 
       background: red !important 
       -webkit-text-size-adjust:none; 
    }
}

引用:http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 1

修改了自己的尝试

@media only screen and (max-width: 640px) and (orientation: portrait) {
    body { padding: 10px !important }
}

/* Small screen */
@media only screen and (min-device-width: 320px) and (max-device-width: 479px) and (orientation: portrait) {
    body { background: blue !important }
}

/* iPhone landscape and iPad portrait */
@media only screen and (max-device-width: 480px) and (orientation: landscape),
@media only screen and (max-device-width: 640px) and (orientation: portrait)  {
    body { 
       background: red !important 
       -webkit-text-size-adjust:none; 
    }
}