Is there a way to force horizontal / landscape layout on mobile devices?

iphone mobile mobile-website
CodeVirtuoso picture CodeVirtuoso · Jan 26, 2011 · Viewed 23.4k times · Source

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.

Answer

Michael Mullany picture Michael Mullany · Jan 26, 2011

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.

Related questions

Change the color of the iOS 7 status bar in Safari and Chrome

I want to change the color of the iOS 7 status bar in Safari and Chrome. I'm working on a mobile web app and would like it to feel native and right now, I just get a white status bar.

Read More
Disable auto-rotate in Jquery Mobile or PhoneGap

Although cross platform development for mobile devices is so good. There isn't a simple option to disable auto-rotate or lock into one orientation i.e. portrait or landscape. Is there anyway either in Jquery Mobile, PhoneGap, XUI anywhere ? If yes …

Read More
position: fixed doesn't work on iPad and iPhone

I have been struggling with fixed positioning in iPad for a while. I know iScroll and it does not always seem to work (even in their demo). I also know that Sencha has a fix for that, but I couldn't …

Read More