locking screen orientation on mobile browser

Question

I create a web page(chrome & safari) for mobiles (iphone & android), I want to lock the screen orientation in portrait mode.

Unlike mobile apps,there is no manifest file and activity as it a web page.

How to lock the orientation in mobiles using technologies (css/javascript/bootstrap/jquery) or any other?

Answer 1

I use a manifest file for my web app, which locks orientation for Chrome on my Android. For whatever reason, Safari gives their users the "right" to do this, but not the designers of the web app... Sort of feels like copyright infringement or something! ;) Don't get me started on Safari's disgraceful rewriting/rendering of input buttons!...

Anyways, back to the answer.

1) Include a link to your manifest within the head section of your page:

<link rel="manifest" href="http://yoursite.com/manifest.json">

2) Create your manifest file, "manifest.json"

{
"name":"A nice title for your web app",
"display":"standalone",
"orientation":"portrait"
}

3) Read more about manifests HERE

Answer 2

From my tests, assigning the screen.lockOrientation ( every browser versions ) to a var throw an illegal invocation error. Just use wind.screen.orientation.lock('landscape'); . It

EDIT: You can't use lock orientation on safari, cause it doesn't support fullscreen api at the moment http://caniuse.com/#feat=fullscreen . The lock orientation API NEED a fullscreen page to work. In Chrome, the window.screen.orientation.lock return a promise. So, AFTER you go fullscreen with the page, you can do something like this :

var lockFunction =  window.screen.orientation.lock;
if (lockFunction.call(window.screen.orientation, 'landscape')) {
           console.log('Orientation locked')
        } else {
            console.error('There was a problem in locking the orientation')
        }

However, the lock orientation and fullscreen API are still experimental, not all browsers supports it.