Menu
I'm building an app in the browser for the iPad and was wondering if it's possible to lock the orientation of the viewport? I've checked apple's documentation and the only thing I've found says orientation is read only: https://developer.apple.com/documentation/webkitjs/domwindow/1632568-orientation
I'm thinking this means that there is no way to lock the orientation in the browser. Anyone got any ideas?
427
screen. orientation. lock('landscape'); Will force it to change to and stay in landscape mode.
How to rotate the screen on your iPad. Make sure that Rotation Lock is off: Swipe down from the top-right corner of your screen to open Control Center. Then tap the Rotation Lock button to make sure it's off.
In order to disable the landscape mode you need to add the following meta tag to your page header like so: Note: Please paste it at the top of your header. You can use the plugin call insert headers and footers to do so.
No. I guess this would appear too restrictive to the user, so you can only detect UI orientation. The only way to lock the orientation would be the exterior switch on the side of the device.
See this answer for code to detect it. You could also just use window.orientation to get it.
For my webapps, I simply have a popover-view that alerts the user to rotate their device when its orientation is not desirable. You might even consider two UI setups for different orientations for a more customizable experience.
51
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
