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

Answer 2

根据这个网站：

iPhone 2G-4S 横屏

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