我的 iPhone 6 获得 iPhone 5 媒体查询

Question

我无法弄清楚这里发生了什么。 我的 CSS 媒体查询中有专门针对 iphone 5 的：

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
    #some-div {
        display: none;
    }
}

我在我的 Iphone 6 上打开网页，由于某种原因，这个媒体查询启动并且那个 div 被隐藏了。

当我在测试站点上检查设备的宽度时，例如：http://www.quirksmode.org/m/tests/widthtest_vpdevice.html 它显示的宽度/高度为：320/568。

这里有什么问题以及如何解决？

谢谢

Answer 1

尝试使用纵横比而不是绝对像素，如下所述。

https://stackoverflow.com/a/12848217/4824030

另一个有用的媒体功能是设备纵横比。

请注意，iPhone 5 没有 16:9 的纵横比。它在 事实 40:71。

iPhone

iPhone 5：@media 屏幕和（设备纵横比：40/71）{}

iPhone 6：@media 屏幕和（设备纵横比：667/375）{}

iPhone 6 Plus：@media 屏幕和（设备纵横比：16/9）{}

iPad：@media 屏幕和（设备纵横比：3/4）{}