10

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.

ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
CodeVirtuoso
  • 6,318
  • 12
  • 46
  • 62

2 Answers2

11

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.

Community
  • 1
  • 1
Michael Mullany
  • 30,283
  • 6
  • 81
  • 105
  • 1
    Thanks, and I absolutely agree with you this is to be avoided, I just have at hand an exception that confirms the rule. – CodeVirtuoso Jan 26 '11 at 16:42
  • 2
    Implemented this in a project I was working on and the results were not good. If you can, stay away from this. This shows bad UI/UX and I think it's much better suited to display some sort of message with media queries instead than trying to rotate the entire `HTMLelement`. – Sethen Jan 25 '13 at 15:39
  • 2
    Also, the best solution is to have an answer for both portrait and landscape views rather than relying on hacks. – Sethen Jan 25 '13 at 15:45
6

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.

Jim Amos
  • 289
  • 1
  • 4