media-queries中的max-width是使用宽度还是高度？

Question

这个问题有点愚蠢，但很长一段时间我对此感到困惑。当我们在媒体查询中使用max-width时，它是应用于当前宽度，还是应用于尽可能长的宽度。

例如，我们知道iPhone 4是320 x 480，如果我希望我的查询仅应用于垂直视图，那么我应该使用max-width：320还是应该使用max-width：480

Answer 1

这取决于浏览器是处于纵向模式还是横向模式。根据上一个问题的答案，也可以锁定此问题：How do I lock the orientation to portrait mode in a iPhone Web Application?

Answer 2

宽度指的是当前方向的宽度。

在纵向视图中，宽度小于高度。在横向中，高度小于宽度。

当你的目标是拥有layout for portrait mode时，你应该专注于那个而不是宽度。

@media all and (orientation: portrait) { ... }