检查设备是否支持 ScreenOrientation.lock() - 未捕获错误 screen.orientation

Question

我正在按照文档进行操作ScreenOrientation.lock()但我无法让它按我想要的方式工作。

https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/lock

在Chrome桌面上调用window.screen.orientation.lock("portrait");时，我收到错误screen.orientation.lock() is not available on this device.为未捕获的错误。有没有办法检查设备是否支持锁定？

我已经"orientation":"portrait"放入manifest.json，但这只是默认方向，而不是锁定。

https://www.w3.org/TR/appmanifest/#orientation-member

旁注：

我在理解如何调用该方法时遇到了一些麻烦。如果有人找到此线程，则出现错误示例：

ScreenOrientation.prototype.lock("portrait");
window.ScreenOrientation.prototype.lock("portrait");

导致此异常：

未处理的拒绝(类型错误(：无法执行"锁定" "屏幕方向"：非法调用

(ScreenOrientation as any).lock("portrait");

导致此异常：

TypeError： ScreenOrientation.lock 不是函数

Answer 1

window.screen.orientation.lock()返回一个承诺。承诺将调用您提供给链式then()方法的函数之一，具体取决于承诺是已解决(成功(还是被拒绝(失败(。

您可以像这样拨打window.screen.orientation.lock()电话：

window.screen.orientation
.lock("portrait")
.then(
success => console.log(success),
failure => console.log(failure)
)

您可能希望在resolve和reject方法中放置一些更有用的东西，但这至少会捕获拒绝并防止引发未处理的拒绝错误。

Answer 2

我认为移动设备中的旋转需要一个事件侦听器来处理screen.orientation.lock错误。此代码对我有用

.main-app是一个正文标签类。

在您的 HTML 代码中添加一个按钮，如下所示：

<div id="lock-landscape-btn" class="hidden">Lock</div>
<div id="unlock-orientation" class="hidden">unLock</div>

在你的JS代码/文件中添加一个事件侦听器，如下所示：

function rotateScreen () {
document.querySelector('#lock-landscape-btn').addEventListener('click', function () {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
if(document.querySelector(".main-app").requestFullscreen) {
document.querySelector(".main-app").requestFullscreen();
}else if(document.querySelector(".main-app").webkitRequestFullScreen) {
document.querySelector(".main-app").webkitRequestFullScreen();
}
screen.orientation.lock("landscape-primary")
.then(function() {
console.log('landscape-primary');
})
.catch(function(error) {
console.log(error);
});
}
});
document.querySelector("#unlock-orientation").addEventListener('click', function() {
screen.orientation.unlock();
});
};