移动浏览器锁定屏幕方向

Question

我为移动设备（iPhone和Android）创建了一个网页（在Chrome和Safari上），我想将屏幕方向锁定为竖屏模式。

与移动应用程序不同，它没有清单文件和活动，因为它是一个网页。

如何使用技术（CSS / JavaScript / Bootstrap / jQuery）或其他任何技术在移动设备上锁定方向？

- dosth reddy

---

你使用什么语言？ - reptildarat

Answer 1

我在我的 web 应用中使用清单文件，这可以锁定 Chrome 在我的 Android 上的方向。出于某种原因，Safari 给他们的用户“权利”做到了这一点，但是 Web 应用的设计者们没有……感觉有点像侵犯版权之类的！;) 先不要让我开始说 Safari 对输入按钮的令人发指的重写/渲染！...

无论如何，回到答案。

1）在您页面的 head 部分中包含链接到您的清单的链接：

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

2）创建您的清单文件“manifest.json”

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

3) 阅读有关清单的更多信息，请点击此处

- bcintegrity

---

你说的standalone是什么意思？ - Aminah Nuraini

请查看帖子中的链接，或访问https://developer.chrome.com/multidevice/android/installtohomescreen了解更多主题信息。 - bcintegrity

苹果及其iOS Safari是PWA的毒瘤。 - schankam

这似乎对Android也没有任何影响。 - Methodician

Answer 2

根据我的测试，将 screen.lockOrientation（所有浏览器版本）分配给一个变量会引发非法调用错误。只需使用 wind.screen.orientation.lock('landscape'); 即可。

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

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仍处于实验阶段，不是所有浏览器都支持它。

- Davide Arcinotti

---

我认为你的答案是不完整的。 - Ares Draguna

也许答案不完整，但我认为其他两个答案也不完整：只是从 MDN 上复制粘贴。至少我提供了一个可行的 API 实现。 - Davide Arcinotti

这在 Chrome for Android 上可行！给我投反对票的那个人是个扫兴者。 - David Murdoch

Answer 3

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

- MFP

---

给定的代码似乎在Chrome和Safari上无法正常工作。是否有其他解决方案？谢谢。 - dosth reddy

lockOrientation已被弃用，您应该使用screen.orientation.lock()代替。 - LuisAFK

Answer 4

您可以使用：

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

and 

screen.lockOrientation('landscape');

以下是链接：https://developer.mozilla.org/zh-CN/docs/Web/API/CSS_Object_Model/Managing_screen_orientation

- Tran Quoc Hung

---

谢谢你的帮助。但是上面的代码似乎在Chrome上不起作用。有其他解决方案吗？ - dosth reddy

尝试使用 body[orient="landscape"] 或 body[orient="portrait"]。 - Tran Quoc Hung