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

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

本文介绍了iPhone 5横向媒体查询无法正常工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想以其他方式显示纵向和横向iPhone的页面.

I want to display my page for portrait and landscape iPhones in a different way.

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

On iPhone 4/4S devices everything works fine (portrait and landscape), but on iPhone 5/5s just the Portrait mode works fine (landscape shows the normal PC website).

你知道出什么问题了吗?

Do you know what is wrong?

我的查询如下:

肖像:

@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(横向)无效...

but the picture is the same. iPhone 4/4S (portrait/landscape) and iPhone 5/5s (portrait) works, iPhone 5/5s (landscape) works not...

推荐答案

有针对肖像和风景的媒体查询:

There are media queries for portrait and landscape:

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

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

如果您特别想定位iPhone,这里提供了很多资源: LINK

If you specifically want to target iPhone, here is a great resource: LINK

这篇关于iPhone 5横向媒体查询无法正常工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-06 13:04