Eric Roller's Development Blog

Fixing web site presentation for iOS

- Posted in iOS by

For a while now, I have been puzzled by the fact that Mobile Safari, the iOS version of Safari, opened any page on my web site at a much larger width than the CSS value for the main content area (570px).

It turns out, there are a number of Apple-Specific Meta Tags that can be used to provide background information for your web page, like how to scale it, or providing scaling limits.

To set the initial scaling of a window when presented on the iPhone or iPad, there is the viewport meta tag. If missing, a default width of 960 pixels will be used, or more if the web content is wider. Setting it to 590 pixels, thus adding a 10 pixel padding, works just fine for my particular case:

<meta name="viewport" content="width:590px">