iPhone 5横向媒体查询无法正常工作

Question

我想以不同的方式显示纵向和横向iPhone的页面。

在iPhone 4 / 4S设备上一切正常（纵向和横向），但在iPhone 5 / 5s上只有肖像模式正常工作（横向显示正常的PC网站）。

你知道出了什么问题吗？

我的查询看起来像这样：

人像：

@media (max-width: 320px) {
...
}

风景：

@media (min-width: 321px) and (max-width: 568px) {
...
}

更新

我的查询现在看起来像

@media (max-width: 320px) {
    ...
}

@media screen and (max-device-width: 568px) {
    ...
}

但图片是一样的。 iPhone 4 / 4S（纵向/横向）和iPhone 5 / 5s（肖像）工作，iPhone 5 / 5s（风景）工作不...

Answer 1

有纵向和横向的媒体查询：

@media screen and (orientation:portrait) { 
    … 
}

@media screen and (orientation:landscape) {
    …
}

如果你特别想要定位iPhone，这里有一个很好的资源：LINK

Answer 2

对于iPhone 5S格局，媒体查询将是 -

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

对于您不知道其设备宽度的任何其他智能手机，您可以检查并获取设备宽度 - http://www.mydevice.io/ 这可能有助于针对像micromax，熔岩等小型公司的智能手机进行媒体查询