如何在 HTML5/CSS3 中将视口锁定为纵向方向

Question

是否可以在移动设备上将视口的方向锁定为纵向？

我用谷歌搜索，但找不到确切的方法。

Answer 1

这个技巧应该有效：

    @media screen and (orientation: landscape) {
      html {
        /* Rotate the content container */
        transform: rotate(-90deg);
        transform-origin: left top;
        /* Set content width to viewport height */
        width: 100vh;
        /* Set content height to viewport width */
        height: 100vw;
        overflow-x: hidden;
        position: absolute;
        top: 100%;
        left: 0;
      }
    }

<h1>Test</h1>

如果你只需要在移动设备上应用这个，你可以做一些javascript技巧来识别设备类型，如果是移动设备，你添加一个类is-mobile-device什么的，并html.is-mobile-device在样式定义中指定为选择器。您可能已经使用了一个为不同设备类型添加类的框架，因此您可以指定这些类。

Answer 2

根据我的经验，当您从浏览器访问网站时，这是无法完成的。应该具有锁定方向能力的是浏览器本身——例如Safari、Chrome。你的 HTML CSS 代码将无法控制它。

例如，当您构建混合移动应用程序时 - 意味着具有 html css 和 js 的应用程序，然后将其转换为移动应用程序，并使用包装器作为内部的 Web 视图。然后您就可以锁定屏幕方向。需要完成一些配置，稍后这些配置将转换为 Objective C 或 Java。