iphone 5 横向媒体查询失败

Question

我看过其他问题，但还没有任何答案对我有帮助。

我已将媒体查询设置为：

@media only screen and (max-device-width: 767px) {
    /* css here */
}

我想让 phone 上的页面在横向和纵向呈现相同的效果。

在我的 2 个可用 iphone 5 上 - 一个 5 和一个 5c，肖像效果很好，风景完全忽略它。

我试过特定的横向标签，但也失败了。

我也试过将最大宽度设置为 1500px 以防出现某些视网膜问题 - 但在风景中也失败了。

我已经 运行 css 通过 lint - 甚至没有发现任何糟糕的东西。所以我认为 css 没问题（如果不是 lint-perfect）。

在我收到客户的回音之前，该网站暂时处于锁定状态 - 因此发布 link 无济于事。但是有没有其他人看到这个问题，有没有解决办法？当我明天回到家时，我可以尝试使用旧的 Android phone 看看效果如何。但现在它让我发疯！

Answer 1

你必须使用最大设备宽度吗？因为如果您将其更改为使用最大宽度，您将保持所有样式达到该尺寸。

两者的区别在于最大设备宽度，如果您在浏览器上查看网站并将其缩小，它不会响应，但如果您使用最大宽度，它会在缩小时为网站提供响应的感觉浏览器。

@media all and (max-width: 767px) {
    css in here
}

我更喜欢使用最大宽度。

我能想到的唯一我们应该使用 max-device-width 而不是 max-width 的情况是当我们需要保持一致时，即使浏览器 window 已经重新调整大小。