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

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