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.

Answer 1

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.