iPhone 5 横向媒体查询不起作用
Posted
技术标签:
【中文标题】iPhone 5 横向媒体查询不起作用【英文标题】：iPhone 5 landscape media queries not working 【发布时间】：2013-11-16 10:06:36 【问题描述】：我想以不同的方式显示我的纵向和横向 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（横向）工作不......
【问题讨论】：
【参考方案1】：有纵向和横向的媒体查询：
@media screen and (orientation:portrait)
…
@media screen and (orientation:landscape)
…
如果您特别想针对 iPhone，这里有一个很好的资源：@987654321@
【讨论】：
好的，谢谢。但为什么我的查询不起作用？因为横向的 iphone 5 有最大宽度：568px，或者没有？所以宽度在 312px 和 568px 之间。不是吗？ 因为min-width 不是321px。它是min-device-width: 320px。或者干脆去掉 min 并使用 max-device-width: 568px
感谢您的回答。也许我太愚蠢了，但请看看我更新的问题【参考方案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、lava 等小公司的智能手机进行媒体查询
【讨论】：
以上是关于iPhone 5 横向媒体查询不起作用的主要内容，如果未能解决你的问题，请参考以下文章
媒体查询在 chrome 中不起作用，但在 iphone 上起作用