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 ，它将覆盖不支持新窗口的旧Android设备.screen.orientation api

然后，您需要做的就是在resize / orientationchange事件上添加/删除一个类。

/* 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';
        }

    }