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是否有可能检查横屏或竖屏显示？

- user1544337

Answer 1

是的，可以使用以下语法：

@media all and (orientation: landscape) {}

查看w3规范以获取更多信息。

- mogelbrod

---

谢谢！小问题跟进：当有人倾斜手机屏幕以改变方向时，会发生什么？应用的CSS会改变吗？ - user1544337

我自己还没有检查过，但我非常确定这是正确的，因为其他媒体查询（如屏幕宽度）都会重新检查。 - mogelbrod

Answer 2

你可以使用方向:

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

- Eli

Answer 3

From w3:

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

- Vucko

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 设备。

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

    }

- Matt

---

请您能否提供一些例子或研究来支持您的回答？ - kingJulian

以下是关于键盘出现时断点触发的问题。https://dev59.com/P2ox5IYBdhLWcg3w74q2#8883535 - Matt

@kingJulian 我不需要提供研究。当 Android 上显示键盘时，视口会重新调整大小。这意味着断点将会改变。 - Matt

但是你刚刚做了啊。你提供了一个代码示例，而在你的原始帖子中没有任何内容。对吧？ - kingJulian

@kingJulian，回复是关于提供有关Android WebView在显示键盘时调整大小的研究。我添加了一个链接，展示其他人也认识到了这个问题。很抱歉我没有意识到这是在你最初的消息之后。我刚刚添加的示例只是为了让其他人不必搜索Android解决方案。 - Matt