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

Question

在移动设备上，是否有可能将视口方向锁定为纵向？

我通过谷歌搜索了一下，但没有找到确切的方法。

- H. Ferrence

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指定为样式定义中的选择器。您可能已经使用了一个框架，它为不同的设备类型添加了类，因此您可以指定这些类。请注意，这实际上并不会锁定方向，只是使页面看起来像被锁定了。

- awe

---

刚刚将这段代码复制到了index.css文件中，结果在最新版本的Chromium浏览器上导致整个应用程序旋转了90度。 - Wu Wei

Answer 2

根据我的经验，如果您是通过浏览器访问网站，则无法实现此操作。只有具备锁定方向功能的浏览器（例如Safari，Chrome）才能实现此操作。您的HTML CSS代码无法控制它。

例如，当您构建混合移动应用程序时-这意味着使用HTML CSS和JS构建应用程序，然后使用包装器将其转换为内部的Web视图的移动应用程序，那么您可以锁定屏幕方向。需要进行一些配置，然后将其转换为Objective C或Java。

- trungk18

---

从浏览器解决方案到本地应用程序+ Webview，这是一个相当大的飞跃建议。 - pstanton

Answer 3

使用渐进式网页应用（PWA）设置是可能的，但只有在PWA“安装”（添加到主屏幕）时才能实现。浏览器支持可能会有所不同，但在我看来相当不错。

创建Web清单时，请设置"方向"属性。

有关完整指南，请在此处阅读。

- pstanton

Answer 4

使用CSS，我们可以使用；这在iPhone上可能有效：

 @viewport {  
   orientation: portrait;  
 }  

这里有一个链接，我们可以添加它，基本上做的是相同的事情：

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

这可能并不适用于所有浏览器，但希望能够提供帮助。这里使用JavaScript来“锁定”方向，第二个则添加了一个EventListener到屏幕来识别方向。

以下是锁定方向的方法：

screen.lockOrientation('portrait');

这是我们记录方向的方法：

screen.addEventListener("orientationchange", function () {
  console.log("The orientation of the screen is: " + screen.orientation);
});

- Catto

---

好的，谢谢@Catto。这个处理程序是处理“锁定”（lock）吗？还是您误解了我的问题为“日志”（log）？ - H. Ferrence

它在运行iOS 9.3.2的iPhone 6s上的Safari浏览器上无法正常工作。 - H. Ferrence

现在答案也包含了lock命令。我担心它在Safari上无法工作。但是类似这样的东西可能是答案。我会继续研究。 - Catto

好的，谢谢。在我的 iPhone 上 screen.lockOrientation('portrait'); 无法使用。 - H. Ferrence

不好意思，CSS的解决方案在我的iPhone6上也没有起作用。 - H. Ferrence

也许试一下刚刚发布的链接。 - Catto

Answer 5

如果您只需要针对手机进行此更改，您可以使用如下的组合媒体查询。对于触摸设备，您可以使用（pointer：coarse）以获得更高的准确性。

/* 
  CSS: For most of the phones 
  812px - for iphone x
*/

@media only screen and (pointer: coarse) and (min-width: 320px) and (max-width: 812px) and (orientation: landscape) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

MDN @media - pointer support

的意思是保留HTML标签，其中包含一个指向MDN中关于@media - pointer support的链接。

- Prasad Gayan

Answer 6

每当您为不同的屏幕尺寸设置媒体查询时，只需将方向属性设置为横向，这将始终以横向模式显示您的网页或您编写 CSS 的任何内容。即：

@media screen and (orientation: landscape) {
  CSS here.
}

- Sharjeel Faiq

Answer 7

如果你使用的是功能强大的设备并且处于全屏状态，那么通过屏幕方向 API是可以实现的。

2023年10月，它在安卓设备上得到了支持，但苹果设备尚未支持。

HTML

<button id="btnNullscreen">Fullscreen</button>
<button id="btnLandscape">Landscap</button>
<button id="btnPortrait">Portrait</button>

JAVASCRIPT

btnNullscreen.onclick = () => document.body.requestFullscreen().catch((e) => alert(e));
btnLandscape.onclick = () => screen.orientation.lock('landscape').catch((e) => alert(e));
btnPortrait.onclick = () => screen.orientation.lock('portrait').catch((e) => alert(e));

我没有将它放在代码片段中，因为代码片段中的代码被限制在沙盒中，缺乏必要的权限。

- some