Html CSS3针对iPhone 4和iPhone 5大小屏幕上的目标场景的媒体查询

我在开发移动站点时遇到了CSS3媒体查询的问题。下面的代码在iPhone5横向模式下效果很好，但在iPhone4及以下的横向模式下效果不太好

/* 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%}
}

现在，我需要保持上述功能，但也只针对横向模式下的iPhone4S及以下版本，以及该屏幕大小周围的所有其他设备

---

我是否可以添加另一个媒体查询，以针对较小的屏幕，但同时保留上述样式？

是的，您可以使用以下两种方式针对这两个屏幕上的景观：

// 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号

根据：

iphone2g-4S在风景中

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

---

我需要两个不同的媒体查询，一个是iphone 5上的横向查询，另一个是4s及以下的查询？哦，天哪，我有点快了。我将检查

方向：横向

似乎有什么问题，并相应地更新我的答案。对不起，我认为我没有正确地解释我自己。在iPhone4及以下的横向模式下，我需要一个媒体查询。测试宽度：30%。然后在iPhone5上，我需要给出横向图。测试宽度：50%Oh。是的，你当然能做到。我的最新答案应该可以做到这一点。