CSS响应设计-检测纵向显示

我知道纯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是否可以检查横向或纵向显示？

是，使用以下语法：

@media all and (orientation: landscape) {}

有关更多信息，请参阅。

来自：

您可以使用：

---

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

不同的键盘也需要测试，因为它们可以占用更多的垂直空间。Swift键盘占据了更多的垂直空间，因此您无法使用类似于

@媒体屏幕和（最小纵横比：13/9）{/*横向样式*/}

的解决方案，因为这在很多手机上都会失败

唯一的解决方案是使用javascript

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

在iOS上，您可以使用window.orientation，这很好。ie

Math.abs（window.orientation）==90

是横向的

作为备用方案，您可以使用

window.screen.width>window.screen.height

，它将覆盖不支持新window.screen.orientation api的非常旧的Android设备

然后，您只需在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';
        }

    }

---

谢谢小问题：当有人倾斜他的手机屏幕以改变方向时会发生什么？应用的CSS会改变吗？我自己还没有检查过，但我很确定情况是这样的，因为其他媒体查询（如和屏幕宽度）都会重新检查。你能提供一些例子/研究来支持你的答案吗？以下是关于键盘出现时触发断点的问题@我不需要提供研究。当键盘显示在Android上时，视口将调整大小。这意味着断点会改变。但你刚刚改变了。。您在代码中提供了一个示例，而在最初的帖子中您没有任何示例。是吗？@kingJulian的回复是关于提供有关Android网络视图在显示键盘时调整大小的研究。我确实添加了一个链接，显示其他人认识到了这个问题。对不起，我没意识到这是在你最初的留言之后。我刚才添加的示例只是为了阻止其他人搜索Android解决方案。

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

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

    }