Is there a way to force horizontal / landscape layout on mobile devices?
I'm building a mobile version of a website, and in this specific case it would look perfect in horizontal layout. Is there a way to force this layout no matter user setting are?
Answer with some universal way is appreciated, but also if you know how to achieve this on any specific platform (iPhone, android..) so maybe we can collect a decent set of rules to target majority of mobile users.
Solution 1:
There is a hack that will accomplish this, but I seriously advise against using it - your design should adapt to whether someone is in portrait or landscape mode.
Step 1: Query the window.orientation property to see if you're in landscape or portrait mode
Step 2: If you're in portrait mode use a -webkit-transform rotate (-90) on a div that's wrapping your entire page to force it into a landscape layout.
This won't work quite correctly - the browser UI will still be in portrait mode, but presumably the user will figure out that they're supposed to rotate the phone back into landscape mode in order to view the content. This is incredibly annoying to users - there is probably a good reason they are trying to read your site in portrait mode.
Solution 2:
Try adding this Meta to your <head>
<meta name="viewport" content="width=480">
The presence of a horizontal scrollbar in vertical mode will cue the user that he/she needs to rotate into landscape. I can't see many use cases for this - but I have seen this for some games and mapping applications so it's not entirely evil.