Menu
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.
823
When on the main screen, under the orientation section, you will see a number of options like 'Auto-rotate OFF', 'Auto-rotate ON', 'Forced Portrait' and 'Forced Landscape'. As the names suggest, you can use these buttons as one-tap shortcuts to toggle the orientation of your device.
Things You Should KnowSwipe down from the top of your screen to enable "Auto-Rotate," then turn your phone to the side to switch to landscape mode. Turn your phone upright to switch back to portrait mode.
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.
110
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.
28
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
