CODEWITHSUNDEEP
javascriptcsstypescript
Ogglas
Ogglas

Reputation: 69968

Check if device supports ScreenOrientation.lock() - Uncaught Error screen.orientation.lock() is not available on this device

I'm following the documentation for ScreenOrientation.lock() but I can't get it to work as I want.

https://developer.mozilla.org/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.org/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:

TypeError: ScreenOrientation.lock is not a function

Upvotes: 3

Views: 7667

Answers (2)

Malki Mohamed
Malki Mohamed

Reputation: 1688

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();
        });
    };

Upvotes: 0

James Newton
James Newton

Reputation: 7082

window.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.

Upvotes: 7

Related Questions