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

Posted 2023-03-10

【中文标题】CSS 响应式设计 - 检测纵向显示

【英文标题】：CSS responsive design - detect portrait display

【发布时间】：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 是否可以在横向或纵向显示上进行检查？

【参考方案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';
        

    

【讨论】：

您能否提供一些示例/研究来支持您的回答？

以下是键盘出现时触发断点的问题。 ***.com/questions/8883163/…

@kingJulian 我不需要提供研究。当键盘在 Android 上显示时，视口会调整大小。它们意味着断点会改变。

但是您刚刚做到了。您在代码中提供了一个示例，而在您的原始帖子中您没有任何示例。对吗？

@kingJulian 该回复是关于提供有关在显示键盘时调整 Android webview 大小的研究。我确实添加了一个链接，显示其他人认识到这个问题。抱歉，我没有意识到这是在您的原始消息之后。我刚刚添加的示例只是为了阻止其他人不得不搜索 Android 解决方案。