Possible to disable landscape/portrait mode per Layout


#1

Hi there,

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


#2

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?


#3

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.


#4

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:


(Zion Smith) #5

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


#6

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.


Disable document auto rotate
(Warren Adams-Ockrassa) #7

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