@media方向寬度

Question

當指定min-width和min-device-width媒體查詢時，是根據當前電話寬度還是手機電話寬度聲明的寬度？

例如，iphone4的標準/人像方向的寬度/高度爲320x480，並且其device-width爲320.如果手機處於橫向模式，則是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。

但是，一個重要的注意事項：如果你沒有一個視口元標記，這些則使用另一種寬度之一（例如980px），它保持不變爲兩個方向：

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

只有一個這兩個meta標籤的寬度適合於方向。