The personal website of Chris Coyier

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;">