Verify the compatibility of the device with ScreenOrientation.lock() function - An error occurred indicating that screen.orientation.lock() is not supported on this particular device

Question

Verify the compatibility of the device with ScreenOrientation.lock() function - An error occurred indicating that screen.orientation.lock() is not supported on this particular device

I've been trying to implement ScreenOrientation.lock() according to the documentation, but I'm having trouble getting it to work correctly.

https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/lock

When I use

window.screen.orientation.lock("portrait");

on Chrome desktop, I receive an error stating that

screen.orientation.lock() is not available on this device.

. Is there a way to determine if a device supports screen orientation locking?

I have already included "orientation":"portrait" in my manifest.json, but this only sets the default orientation and does not lock it.

https://www.w3.org/TR/appmanifest/#orientation-member

On a side note:

I had some difficulty understanding how to properly call the method. If anyone else encounters these errors:

ScreenOrientation.prototype.lock("portrait");

window.ScreenOrientation.prototype.lock("portrait");

It results in the following exception:

Unhandled Rejection (TypeError): Failed to execute 'lock' on 'ScreenOrientation': Illegal invocation

(ScreenOrientation as any).lock("portrait");

This leads to the following exception:

TypeError: ScreenOrientation.lock is not a function

javascript css typescript

Answer 1

Answer №1

Utilizing the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" rel="noreferrer">Promise</a> feature, calling <code>window.screen.orientation.lock()

will return a promise. This promise will trigger one of the functions provided to a chained then() method based on whether the promise is resolved (success) or rejected (failure).

To execute window.screen.orientation.lock(), you can do it in this manner:

window.screen.orientation
    .lock("portrait")
    .then(
        success => console.log(success),
        failure => console.log(failure)
    )

You may want to include more relevant content in the resolve and reject methods, but this setup will at least handle rejection and prevent an Unhandled Rejection error from occurring.

Answer 2

Utilizing the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" rel="noreferrer">Promise</a> feature, calling <code>window.screen.orientation.lock()

will return a promise. This promise will trigger one of the functions provided to a chained then() method based on whether the promise is resolved (success) or rejected (failure).

To execute window.screen.orientation.lock(), you can do it in this manner:

window.screen.orientation
    .lock("portrait")
    .then(
        success => console.log(success),
        failure => console.log(failure)
    )

You may want to include more relevant content in the resolve and reject methods, but this setup will at least handle rejection and prevent an Unhandled Rejection error from occurring.

Answer 3

Answer №2

Handling rotation in mobile devices often requires an event listener to manage the error related to screen.orientation.lock. This particular piece of code has proven effective for me.

The class .main-app is applied to the body tag.

To incorporate a button into your HTML code, include the following:

    <div id="lock-landscape-btn" class="hidden">Lock</div>
    <div id="unlock-orientation" class="hidden">unLock</div>

In your JS file or code, make sure to add an EventListener like so:

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

Answer 4

Handling rotation in mobile devices often requires an event listener to manage the error related to screen.orientation.lock. This particular piece of code has proven effective for me.

The class .main-app is applied to the body tag.

To incorporate a button into your HTML code, include the following:

    <div id="lock-landscape-btn" class="hidden">Lock</div>
    <div id="unlock-orientation" class="hidden">unLock</div>

In your JS file or code, make sure to add an EventListener like so:

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

Verify the compatibility of the device with ScreenOrientation.lock() function - An error occurred indicating that screen.orientation.lock() is not supported on this particular device

Answer №1

Answer №2

Similar questions

Overflow of Primary Text in Material UI List Item

Lowest value malfunctioning

What is the process for executing a PATCH request from an HTML form in NodeJS?

"The CSS problem is that the input tags should be aligned in the same row instead of the second row

Maintain the modifications in NPM software dependencies

Striving to implement a dynamic dropdown menu using React's <select> element and rendering users from an array as selectable options

Endless loops: How React JS components can render indefinitely

Unspecified outcome of Ajax array as a choice in Select

Concluding a row in PHP Bootstrap for various grid dimensions

Incorporate a backdrop to enhance a material icon

Arrange the array according to the values within each sub-array

What is the process of organizing information with http in Angular 2?

How to center a paragraph using Bootstrap:

Enhance the HTML content using a JavaScript function

Transforming the elements within an array of objects into individual key-value pairs and then adding them to a fresh array

Displaying a message within a picture

Attempting to iterate over the array of objects in order to discover a match

Unable to persist data in MongoDB (Image of PopUp)

Utilizing Firebase's orderByChild feature to retrieve the latest posts

I am having trouble with my React Router v6 code - when I use the navigate function, the component does not load