iPhone Meta Tag for Viewport, Maintaining Scale on Orientation Change

I was googling around trying to find something on this today and there is lots of advice for setting the iPhone viewport like this:

<meta name="viewport" content="width=320">

That’s fine and dandy for when the iPhone is vertical, but when you flip it, the screen kind of “zooms in” to make 320 pixels into 480 and it looks like shit. Some more experimenting and googling around it it looks like this is the best way to go for keeping things consistent on an orientation change on the iPhone.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

Comments

  1. John says:

    I’ve been playing around with an iphone page, specifically with regards to streaming video, and the default export from Quicktime Pro recommends and I set all my default content to 480 pixels wide. The reason I did this was because I enabled debugger on my iphone , settings > safari > developer > debug console on ,and I got an error with the above code, more a tip but still. I do note I was playing around with targeting iphone only in mind but believe this would be best for most mobile devices, thoughts?

  2. s.a says:

    @John

    If you are using XHTML you will need to close the meta tag by adding a a foward slash to the end.

  3. Robert says:

    Is there anyway to disable the orientation totally?

  4. Matt Keas says:

    @robert

    you’d be a total dick… but

    css3 rotations and/or javascript :P

  5. According to the spec you should use commas and not semicolons to separate the values. Also, setting maximum-scale=1.0 means that users can’t zoom in. This is a problem for users with bad eyesight.