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

Joh*_*ner 5 css iphone media-queries responsive-design

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

在iPhone 4/4S设备上一切正常(纵向和横向),但在iPhone 5/5s上只是肖像模式工作正常(横向显示正常的PC网站).

你知道什么是错的吗?

我的查询看起来像这样:

肖像:

@media (max-width: 320px) {
...
}
Run Code Online (Sandbox Code Playgroud)

景观:

@media (min-width: 321px) and (max-width: 568px) {
...
}
Run Code Online (Sandbox Code Playgroud)

UPDATE

我的查询现在看起来像

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

@media screen and (max-device-width: 568px) {
    ...
}
Run Code Online (Sandbox Code Playgroud)

但图片是一样的.iPhone 4/4S(纵向/横向)和iPhone 5/5s(肖像)工作,iPhone 5/5s(风景)工作不...

Tur*_*nip 5

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

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

@media screen and (orientation:landscape) {
    …
}
Run Code Online (Sandbox Code Playgroud)

如果您特别想要定位iPhone,这里有一个很好的资源:LINK