Question

我为手机（iphone和Android）创建了一个网页（chrome＆amp; safari），我想以纵向模式锁定屏幕方向。

与移动应用不同，网页没有明显的文件和活动。

如何使用技术（css / javascript / bootstrap / jquery）或其他任何方式锁定手机中的方向？

Answer 1

我为我的网络应用程序使用清单文件，该文件锁定了Android上Chrome的方向。无论出于何种原因，Safari都会向用户提供“正确的”＃34;要做到这一点，但不是网络应用程序的设计者...有点像版权侵权或其他东西！ ;）不要让我开始使用Safari不可思议的重写/渲染输入按钮！...

无论如何，回到答案。

1）在您网页的head部分中添加指向您的清单的链接：

<link rel="manifest" href="http://yoursite.com/manifest.json">

2）创建清单文件＆＃34; manifest.json＆＃34;

{
"name":"A nice title for your web app",
"display":"standalone",
"orientation":"portrait"
}

3）阅读有关清单HERE

的更多信息

Answer 2

从我的测试中，将screen.lockOrientation（每个浏览器版本）分配给var会引发非法调用错误。只需使用wind.screen.orientation.lock（＆＃39; landscape＆＃39;）; 。它

编辑：您无法在Safari中使用锁定方向，因为它目前不支持全屏api http://caniuse.com/#feat=fullscreen。锁定方向API需要一个全屏页面才能工作。在Chrome中，window.screen.orientation.lock返回一个承诺。因此，在您全屏显示页面后，您可以执行以下操作：

var lockFunction =  window.screen.orientation.lock;
if (lockFunction.call(window.screen.orientation, 'landscape')) {
           console.log('Orientation locked')
        } else {
            console.error('There was a problem in locking the orientation')
        }

但是，锁定方向和全屏API仍然是实验性的，并非所有浏览器都支持它。

Answer 3

您可以使用：

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

and 

screen.lockOrientation('landscape');

以下：https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation

Answer 4

lockOrientation 方法将屏幕锁定到指定的方向。

lockedAllowed = window.screen.lockOrientation(orientation);

从以下代码中，您可以检查方向是否已锁定。

var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;

if (lockOrientation("landscape-primary")) {
   // orientation was locked
} else {
  // orientation lock failed
}

请参阅以下链接，您将从中了解到这一点。

https://developer.mozilla.org/en-US/docs/Web/API/Screen.lockOrientation

在移动浏览器上锁定屏幕方向

4 个答案: