CSS3媒体查询，用于在iPhone 4和iPhone 5大小的屏幕上定位横向

Question

我在开发移动网站时遇到CSS3媒体查询问题。下面的代码在iPhone 5横向模式下运行良好，但在iPhone 4及以下横向模式下则不太好。

/* Normal css represents portrait */
.test {width:100%;}
/* Flip to landscape (working great on iPhone 5) - not so great on 4s and below */
@media screen and (orientation: landscape) {
    .test {width: 50%}
}

现在，我需要保持以上功能，但也只针对处于景观模式的iPhone 4s及以下，以及该屏幕大小附近的所有其他设备。

我可以添加另一个媒体查询以针对较小的屏幕，同时保持以上样式吗？

Answer 1

是的，您可以使用以下两种方法瞄准横向

// Iphone 5
@media screen and (orientation:landscape) {
    .test { width: 50% }
}
// Iphone 4 and below, from @Danield's example
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) { 
    .test { width: 30% }
}

第一个是iPhone 5，第二个是iPhone 4及以下版本。尽管如此，我认为第二种方法本身应该对两者都有效。但我不能确认，因为我没有5。

http://www.w3.org/TR/css3-mediaqueries/#orientation

Answer 2

根据本网站：

横向中的iPhone 2G-4S

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) { /* STYLES GO HERE */}