@media 方向宽度

Question

当指定 min-width 和 min-device-width 媒体查询时，您声明的宽度是基于 phone 的当前宽度还是 phone 的 potrait 宽度？

例如，iphone4 在 standard/portrait 方向上的 width/height 为 320x480，device-width 为 320。如果 phone 保持在风景中，device-width 现在是 480 还是仍然是 320？

Answer 1

使用的宽度将是视口的当前宽度。如果方向旋转，当前宽度将变为旋转设备的宽度（或者，设备在纵向模式下的高度）。

您可以指定方向，使用orientation: landscape。

查看此处了解更多信息：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Answer 2

它始终是“当前”宽度。您可以通过警告 window.innerWidth 或类似的方式轻松检查。

示例：

+---------+    +-----------------------+
|         |    |                       |
|         |    |       480 x 320       |
|   320   |    |                       |
|    x    |    |                       |
|   480   |    +-----------------------+
|         |                 Width: 480px
|         |
|         |
+---------+
Width: 320px

旋转也会触发 resize 事件。

但重要提示：如果您没有像其中一个这样的视口元标记，则使用另一个宽度（例如 980 像素），这在两个方向上保持相同：

<meta name="viewport" content="initial-scale=1"/>
<meta name="viewport" content="initial-scale=1, user-scalable=no"/>

只有使用这两个元标记之一，宽度才会适应方向。

@media 方向宽度

@media Orientation Width

css

media-queries

screen-orientation