css - 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 */
}

^（来源）

是否可以使用纯 CSS来检查横向或纵向显示？

Answer 1

是的，使用以下语法：

@media all and (orientation: landscape) {}

有关详细信息，请参阅w3 规范。

Answer 2

您可以使用方向：

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

Answer 3

从w3：

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

Answer 4

所有答案都不正确。显示键盘时，Android 将从纵向切换到横向。

不同的键盘也需要测试，因为它们会占用更多的垂直空间。Swift 键盘占用更多的垂直空间，因此您不能使用这样的解决方案，@media screen and (min-aspect-ratio: 13/9) { /* landscape styles here */}因为这在很多手机上都会失败。

唯一的解决方案是使用 javascript。

在较新的 Android 设备上，您可以测试和使用新的 window.screen.orientation api。

在 iOS 上，您可以使用 window.orientation 效果很好。即Math.abs( window.orientation ) === 90是风景

作为后备，您可以使用window.screen.width > window.screen.height它来覆盖不支持新 window.screen.orientation api 的真正旧的 Android 设备

然后您需要做的就是在调整大小/方向更改事件上添加/删除一个类。

/* Android Orientation */
    var orientation = window.screen.orientation || window.screen.mozOrientation || window.screen.msOrientation || null;

    /* Check */
    if ( orientation && orientation.type ) {

        /* Landscape */
        if ( orientation.type === 'landscape' || orientation.type === 'landscape-primary' || orientation.type === 'landscape-secondary' ) {
            return 'landscape';

        /* Portrait */
        } else {                                
            return 'portrait';
        }

    }