Question

我见过其他问题，但没有回答对我有帮助。

我已将媒体查询设置为：

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

我希望手机上的页面在横向和纵向中呈现相同的效果。

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

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

我还尝试将最大宽度设置为1500px，以防万一视网膜的情况 - 而且在景观方面也失败了。

我通过lint运行了css - 而且甚至没有发现任何坏事。所以我认为css是可以的（如果不是lint-perfect）。

该网站暂时被锁定，直到我收到客户的回复 - 因此发布链接无济于事。但有其他人看过这个问题，那有什么问题吗？当我明天回到家时，我可以尝试一个旧的Android手机，看看它做了什么。但是现在它让我发疯了！

Answer 1

你必须使用max-device-width吗？因为如果将其更改为使用max-width，则会将所有样式保持为该大小。

它们之间的区别是max-device-width如果你在浏览器上查看网站并将其缩小它没有响应但是如果你使用max-width它会让网站在缩小浏览器时有一种敏感的感觉

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

我更喜欢使用max-width。

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