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

Question

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

我用 Google 搜索了一下，但找不到具体的操作方法。

Answer 1

有了 CSS 我们可以使用；这可能适用于 IPhone:

 @viewport {  
   orientation: portrait;  
 }

这是我们可以添加的 link，它基本上做同样的事情：

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

这可能不适用于所有浏览器，但希望能有所帮助。这使用 JavaScript 到 "lock" 方向，并且第二个将 EventListener 添加到屏幕以识别方向。

这就是我们锁定方向的方式：

screen.lockOrientation('portrait');

这就是我们记录方向的方式：

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

Answer 2

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

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

Answer 3

这个技巧应该有效：

    @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技巧来识别设备类型，如果是移动设备，你添加一个class is-mobile-device 之类的，并在样式定义中指定 html.is-mobile-device 作为选择器。您可能已经使用了一个框架，该框架已经为不同的设备类型添加了 classes，因此您可以指定这些。

请注意，这实际上不会锁定方向，只是让页面看起来像是被锁定了。

Answer 4

如果您只需要对 phone 进行此更改，您可以使用如下所示的组合媒体查询。为了更准确，您可以对触摸设备使用（指针：粗略）

/* 
  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

Answer 5

可以使用 PWA（渐进式网络应用程序）设置，但前提是“安装”PWA（添加到主屏幕）。浏览器支持可能会有所不同，但在我看来是相当不错的。

创建网络清单时，设置 "orientation" property

完整指南，read here。

Answer 6

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

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

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

How to lock viewport to Portrait Orientation in HTML5/CSS3

html

css

mobile

portrait

viewport