Possible to disable landscape/portrait mode per Layout

Hi there,

is it possible to disable landscape/portrait mode for different layouts with the common mobile browsers?

On Android and iOS devices the user can lock their orientation (so rotating doesn’t enter landscape mode, for example) but you as a web designer can’t restrict that behavior.

I have seen some sites show annoying warnings that say “rotate your device” but I think this is the wrong approach. Can you explain what you’re trying to do?

i was looking for a way to force the user to use portrait mode on smartphone devices, so if the user rotating the smartphone to landscape, the content should not rotate.

Smartphones don’t allow websites to dictate which way is ‘up’ so I don’t think this possible.

Here’s a bit more info about what you can detect if you want to change the experience for your visitors based on their device rotation:

Hi Daniel i have the same request, i want to make one of those old school maze games, where you have a little steal ball and tilt your phone in any direction and manoeuvre the ball into the whole but if i move too much my screen flips into landscape mode, which sucks because then the whole background is stuffed and the ball is off screen. please help with this one

You’re going to need to create a webview within an app to control this behavior. Or, you can instruct the user to select this option on their iOS device as part of the game’s startup process:

If you want to go the App route, this guide by @nick is great.

Yes and no. I had the same question; I’m working on deploying a Hype generated app as an iOS release, and discovered that even tough I specify, in XCode, that the app should not rotate, it does in fact do so in the current releases of both XCode and iOS.

Unfortunately this apparently isn’t a Hype-accessible setting; it appears to be a subset of HTML5, and it has yet to be implemented (consistently or otherwise) across browsers, let alone web views in third-party development environments.

More here: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation