Web 应用程序屏幕方向锁定：方向锁定失败

Question

我使用了其他问题中的几种方法来尝试锁定我的网络应用程序的屏幕方向，但锁定方向总是失败。这是我的代码：

// lock orientation to portrait
window.screen.lockOrientationUniversal = window.screen.lockOrientation || window.screen.mozLockOrientation || window.screen.msLockOrientation;

if (window.screen.lockOrientationUniversal("portrait")) {
    console.log("Orientation locked to portrait");
} else {
    console.log("Orientation lock failed.");
}

我也尝试过只用 screen. 而不是 window.screen. 并得到同样的结果。请注意，这正在针对 Android 的最新 Firefox 进行测试，并且网络应用程序不是全屏应用程序。

我还收到以下消息：

Use of the orientation sensor is deprecated.

这是有道理的，因为 Mozilla site 提到它已被弃用。最新支持的方法是什么？

Answer 1

1.) Screen.lockOrientation 已弃用（如您提供的 MDN link 所示），因此您拥有的代码可能无法在大多数现代浏览器中运行。

2.) ScreenOrientation 只是界面，这就是 ScreenOrientation.lock("portrait") 不起作用的原因。基本上，ScreenOrientation 是在后台告诉浏览器应该如何构建屏幕方向对象的东西（类似于 JavaScript 中的原型），但它不是对象本身。

在现代浏览器中，您可以像这样访问全局屏幕方向：

var myScreenOrientation = window.screen.orientation;

（来源：https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation）

稍后您可以用这个锁定方向：

myScreenOrientation.lock("portrait");

并用

解锁

myScreenOrientation.unlock();

.lock() 方法 returns 一个 Promise 如果你想用它做任何事情，但它超出了这个问题的范围，所以我只提一下它存在。

3.) 另一个可能的问题：在当前标准下，许多浏览器将要求页面处于全屏模式以锁定设备的方向。由于您的网络应用程序不是全屏的，这也可能会阻止方向被锁定。（见网络标准5.3：https://www.w3.org/TR/screen-orientation/）

Web 应用程序屏幕方向锁定：方向锁定失败

Web app screen orientation lock: Orientation lock failed

javascript

screen-orientation