CSS響應式設計 - 檢測縱向顯示

Question

我知道它是用純CSS可以根據屏幕尺寸相適應的樣式，像這樣：

@media (max-width: 959px) { 
    /* styles for smallest viewport widths */ 
} 

@media (min-width: 600px) and (max-width: 959px) { 
    /* styles for mid-tier viewport widths */ 
} 

@media (min-width: 960px) { 
    /* original CSS styles */ 
} 

^（source）

是它純css可以檢查橫向或縱向顯示嗎？

Answer 1

是，使用的語法如下：

@media all and (orientation: landscape) {} 

更多信息，請參見w3 specs。

Answer 2

從w3：

@media all and (orientation:portrait) { … } 
@media all and (orientation:landscape) { … } 

Answer 3

您可以使用orientation：

@media all and (max-width: 959px) and (orientation : portrait) { 
    /* Styles */ 
} 

Answer 4

所有的答案是不正確的。顯示鍵盤時，Android將從縱向切換到橫向。

不同的鍵盤也需要測試，因爲它們可以佔用更多的垂直空間。 Swift鍵盤佔用更多的垂直空間，所以你不能使用像@media屏幕和（min-aspect-ratio：13/9）這樣的解決方案{/ *這裏的風景風格* /}，因爲這會在很多手機上失效。

唯一的解決方案是使用JavaScript。

在較新的Android設備上，您可以測試並使用新的window.screen.orientation api。

在iOS上，你可以使用window.orientation，它工作正常。即Math.abs（window.orientation）=== 90是風景

作爲後備，你可以使用window.screen.width> window.screen.height，它將覆蓋真正舊的Android設備，不支持新窗口.screen.orientation api

然後，您只需在resize/orientationchange事件上添加/刪除類。