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事件上添加/删除类。