screen.lockOrientation is not a function

Question

I would like to use the API screen in Js with chrome.

 if ( navigator.userAgent.match( /(android|iphone)/gi ) ) {
        if ( 'orientation' in screen ) {
            //console.log( '// API supported, yeah!' );
            //console.log( 'new orientation is ', screen.orientation );
            screen.lockOrientation( 'landscape' );
        } else {
            console.log( '// API not supported ' );
        }
    } else {
        //alert('none');
    }

my error js : caught TypeError: screen.lockOrientation is not a function

/* other */

if ( navigator.userAgent.match( /(android|iphone)/gi ) ) {
    if ( 'orientation' in screen ) {
        let locOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
        locOrientation('landscape');
        console.log( '// API supported, yeah!' , locOrientation);
        console.log( 'new orientation is ', screen.orientation );
        //screen.lockOrientation( 'landscape' );
    } else {
        console.log( '// API not supported ' );
    }
} else {
    //alert('none');
}

my error js : locOrientation is not a function

update : 20/04/2017 -> With Javascript, we can't lock orientation with the navigator.

is this for a normal page or an app? – dandavis Mar 22 '17 at 15:42 — dandavis, Mar 22 '17 at 15:42
a simple webpage, my setup : ( webpack, vuejs ) – Seb Mar 22 '17 at 15:44 — Seb, Mar 22 '17 at 15:44

JosiahDaniels · Answer 1 · 2017-03-23T16:37:22.410

7

This is because lockOrientation is still prefixed. See the [2] footnote in this MDN article. Also, in Chrome it is under orientation.lock. See the [1] footnote in the MDN article.

locOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation || screen.orientation.lock;
locOrientation('landscape');

Please note that not all browsers have this function. Please check if locOrientation is set before you use it.

Edit: Adding the newer orientation.lock to the example.

edited Mar 23 '17 at 16:37

answered Mar 22 '17 at 19:33

JosiahDaniels

2,411
20
37

I have a prob with your source code , i update my post – Seb Mar 23 '17 at 16:08
Ah, Chrome has it under orientation.lock! – JosiahDaniels Mar 23 '17 at 16:38
I prefer to force navigator to lock an orientation – Seb Apr 10 '17 at 11:54

screen.lockOrientation is not a function

1 Answers1