I have used several methods from other questions to try to lock the screen orientation for my web app, but the lock orientation always fails. Here is my code:

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

I have also tried this with just screen. instead of window.screen. and get the same thing. Note that this is being tested on the latest Firefox for Android and that the web-app is not a full-screen app.

I also get the following message:

Use of the orientation sensor is deprecated.

Which makes sense as the Mozilla site mentions that it is deprecated. What is the latest supported way to do this?

I have used several methods from other questions to try to lock the screen orientation for my web app, but the lock orientation always fails. Here is my code:

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

I have also tried this with just screen. instead of window.screen. and get the same thing. Note that this is being tested on the latest Firefox for Android and that the web-app is not a full-screen app.

I also get the following message:

Use of the orientation sensor is deprecated.

Which makes sense as the Mozilla site mentions that it is deprecated. What is the latest supported way to do this?

• javascript
• screen-orientation

• According to MDN, it's deprecated. – yaakov Commented Apr 7, 2019 at 22:15
• @YaakovAinspan Is there a newer way to do this? – Paradox Commented Apr 7, 2019 at 22:16
• 2 The second sentence of the cited MDN documentation says: "The ScreenOrientation.lock() method should be used instead." – user47589 Commented Apr 7, 2019 at 22:18
• @Amy ScreenOrientation.lock("portrait") and window.ScreenOrientation.lock("portrait") give TypeError: ScreenOrientation.lock is not a function. Do you know how I can access the ScreenOrientation interface – Paradox Commented Apr 7, 2019 at 22:39
• These are experimental APIs. It might not be available for your platform. caniuse./#feat=screen-orientation – user47589 Commented Apr 8, 2019 at 12:41

1 Answer 1

1.) Screen.lockOrientation is deprecated (as seen in the MDN link you provided), so the code you have probably won't work in most modern browsers.

2.) ScreenOrientation is just the interface, which is why ScreenOrientation.lock("portrait") does not work. Basically, ScreenOrientation is the thing in the background that tells the browser how the screen orientation object should be built (similar to prototypes in JavaScript), but it is not the object itself.

In modern browsers, you can access the global screen orientation like this:

var myScreenOrientation = window.screen.orientation;

(source: https://developer.mozilla/en-US/docs/Web/API/Screen/orientation)

Later you can lock the orientation with this:

myScreenOrientation.lock("portrait");

and unlock it with

myScreenOrientation.unlock();

The .lock() method returns a Promise if you want to do anything with that, but it's outside the scope of this question, so I'll just mention that it exists.

3.) Another possible issue: under current standards, many browsers will REQUIRE that a page be in fullscreen mode to lock a device's orientation. Since your web app is not fullscreen this will likely also prevent the orientation being locked. (see 5.3 of the web standard: https://www.w3/TR/screen-orientation/)