Screen orientation lock has been available in Android for 6 years. This is useful for going to landscape mode when going to html video fullscreen or WebXR session / canvas. With the impending support WebXR, I believe lock api is useful and of use. Will this be implemented ? I have had to build a css orientation hack fallback in a screen lock helper method. It works tilting content in portrait mode but native would be better. https://w3c.github.io/screen-orientation/#dom-screenorientation-lock demo https://danrossi.github.io/screenlock-api/test/ The support check, Safari has orientation but no lock method. https://github.com/danrossi/screenlock-api/blob/main/src/ScreenLockApi.js#L24
Hi Daniel, The lock() method was implemented (mobile only) as part of: https://bugs.webkit.org/show_bug.cgi?id=245804 Which Safari are you checking on?
I found an experimental flag is disabled in IOS 16.5 on an Ipad, I had to turn this on. When enabling I get this error, when launching a container wrapping a video fullscreen. Because iPhone still doesn't support html fullscreen api, screen locking won't work as it needs fullscreen api. This is needed for WebXR features. So it's for Ipad Safari only right now. NotSupportedError: Apps supporting multiple scenes (multitask) cannot lock their orientation
Appreciate the additional details, Daniel. You are absolutely right about the limitation related to full screen on iPhone. I’ll see if I can track down a bug for that for you (if you haven’t found it already). Once that’s working, then .lock() should automatically just work.
If I make the video element fullscreen instead of the container which is what currently happens in iPhone and requires hacks to make webgl canvas elements fullscreen. It complains it's not in fullscreen. So expecting html fullscreen. Therefore iPhone screen locking won't work until html fullscreen api is implemented and this orientation lock api is enabled by default and not in hidden flags. SecurityError: Locking the screen orientation is only allowed when in fullscreen
I did more research. Safari IOS 16.5 Ipad has Multi-task support. The three dots at the top. That is why screen lock is complaining and returning an error in html fullscreen. So won't work in Safari with html fullscreen enabled. At least the api with the flag enabled does get detected tries to work and returns a promise. It would be the screen.orientation.lock method. const screenLockApi = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation || screen.orientation && screen.orientation.lock && screen.orientation.lock.bind(screen.orientation);
Yes, it wont work on iPad because Safari is a muti-task app. However, it may work as an Home Screen web application once added to the Home Screen (though may still get tripped up by the full screen requirement as implemented today).