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

【问题标题】：CSS responsive design - detect portrait displayCSS 响应式设计 - 检测纵向显示
【发布时间】：2013-05-04 11:42:20
【问题描述】：

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

【问题讨论】：

标签： css responsive-design landscape portrait landscape-portrait

【解决方案1】：

是的，使用以下语法：

@media all and (orientation: landscape) {}

请参阅w3 specs 了解更多信息。

【讨论】：

谢谢！后续小问题：当有人倾斜他的手机屏幕以改变方向时会发生什么？应用的 CSS 会改变吗？
我没有检查过自己，但我很确定情况确实如此，因为其他媒体查询（如屏幕宽度）都被重新检查过。

【解决方案2】：

你可以使用orientation:

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

【讨论】：

【解决方案3】：

来自w3：

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

【讨论】：

【解决方案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';
        }

    }

【讨论】：

您能否提供一些示例/研究来支持您的回答？
以下是键盘出现时触发断点的问题。 stackoverflow.com/questions/8883163/…
@kingJulian 我不需要提供研究。当键盘在 Android 上显示时，视口会调整大小。它们意味着断点会改变。
但是您刚刚做到了。您在代码中提供了一个示例，而在您的原始帖子中您没有任何示例。对吗？
@kingJulian 该回复是关于提供有关在显示键盘时调整 Android webview 大小的研究。我确实添加了一个链接，显示其他人认识到这个问题。抱歉，我没有意识到这是在您的原始消息之后。我刚刚添加的示例只是为了阻止其他人不得不搜索 Android 解决方案。