Mobile Screen orientation lock not working

Question

I'm trying to lock screen orientation using the Screen Orientation API as specified here: https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation and here: https://w3c.github.io/screen-orientation/#examples

The API is still in Working Draft, but it shows that Chrome and Firefox support it but I can't get it to work.

I tried the following:
1)

screen.orientation.lock('portrait').catch(function() { /*Do Nothing*/ });

2)

screen.lockOrientationUniversal = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;

if (screen.lockOrientationUniversal(["portrait"])) {
  // orientation was locked
} else {
  // orientation lock failed
}

But its not working on chrome mobile.

Answer 1

For chrome and native browsers, like samsung internet, you first need to access fullscreen before you're able to set an orientation lock, this can be done by document.body.requestFullscreen which will return a promise. When successful you are able to lock orientation.