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.");
}

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

我还收到以下消息：

不推荐使用方向传感器。

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

Answer 1

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

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() 方法会返回一个 Promise，但它超出了这个问题的范围，所以我只会提到它存在。

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