Question

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

我用Google搜索但无法确切知道该怎么做。

Answer 1

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

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

Answer 2

使用CSS我们可以使用;这可能适用于iPhone：

 @viewport {  
   orientation: portrait;  
 }

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

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

这可能不适用于所有浏览器，但希望会有所帮助。这使用JavaScript来锁定＆＃34;方向与第二个也会在屏幕上添加一个EventListener来识别方向。

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

screen.lockOrientation('portrait');

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

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

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技巧来识别设备类型，如果是移动设备，则可以添加类is-mobile-device或其他内容，并指定{{1 }}作为样式定义中的选择器。您可能已经在使用一个框架，该框架已经为不同的设备类型添加了类，所以您可以指定它们。

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

3 个答案: