admin管理员组文章数量:1327487
I'm following the documentation for ScreenOrientation.lock()
but I can't get it to work as I want.
When calling window.screen.orientation.lock("portrait");
on Chrome desktop I get the error screen.orientation.lock() is not available on this device.
as a Uncaught Error. Is there anyway to check if a device supports locking?
I have already put "orientation":"portrait"
into manifest.json
but this is only default orientation and not a lock.
Side notes:
I had some trouble understanding how to call the method. Example errors if anyone finds this thread:
ScreenOrientation.prototype.lock("portrait");
window.ScreenOrientation.prototype.lock("portrait");
Leads to this exception:
Unhandled Rejection (TypeError): Failed to execute 'lock' on 'ScreenOrientation': Illegal invocation
(ScreenOrientation as any).lock("portrait");
Leads to this exception:
TypeError: ScreenOrientation.lock is not a function
I'm following the documentation for ScreenOrientation.lock()
but I can't get it to work as I want.
https://developer.mozilla/en-US/docs/Web/API/ScreenOrientation/lock
When calling window.screen.orientation.lock("portrait");
on Chrome desktop I get the error screen.orientation.lock() is not available on this device.
as a Uncaught Error. Is there anyway to check if a device supports locking?
I have already put "orientation":"portrait"
into manifest.json
but this is only default orientation and not a lock.
https://www.w3/TR/appmanifest/#orientation-member
Side notes:
I had some trouble understanding how to call the method. Example errors if anyone finds this thread:
ScreenOrientation.prototype.lock("portrait");
window.ScreenOrientation.prototype.lock("portrait");
Leads to this exception:
Unhandled Rejection (TypeError): Failed to execute 'lock' on 'ScreenOrientation': Illegal invocation
(ScreenOrientation as any).lock("portrait");
Leads to this exception:
Share Improve this question asked May 12, 2020 at 8:28 OgglasOgglas 70.3k42 gold badges377 silver badges473 bronze badges 1TypeError: ScreenOrientation.lock is not a function
- A fallback method would be to catch the exception. Doesn’t strictly answer the “detect if” pre-hand. – user2864740 Commented May 12, 2020 at 8:43
2 Answers
Reset to default 7window.screen.orientation.lock()
returns a Promise. A promise will call one of the functions that you provide to a chained then()
method, depending on whether the promise was resolved (success) or rejected (failure).
You could make your call to window.screen.orientation.lock()
like this:
window.screen.orientation
.lock("portrait")
.then(
success => console.log(success),
failure => console.log(failure)
)
You will probably want to put something more useful in the resolve
and reject
methods, but this will at least catch the rejection and prevent an Unhandled Rejection error from being thrown.
I think rotation in mobile requires an event listener to handle screen.orientation.lock
error. This code works for me
The .main-app
is a body tag class.
In your HTML code add a button like:
<div id="lock-landscape-btn" class="hidden">Lock</div>
<div id="unlock-orientation" class="hidden">unLock</div>
In your JS code/file add an EventListener like:
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();
});
};
本文标签:
版权声明:本文标题:javascript - Check if device supports ScreenOrientation.lock() - Uncaught Error screen.orientation.lock() is not available on th 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742204954a2432642.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论