thirstymind.org change viewport for an iPhone

If you have an iPhone one of the first things you’ll surely notice is the super tiny fonts on web pages. This is because the iPhone version of Safari is scaling everything to 980 pixels wide. Well if you don’t have page that is 980 pixels wide, the fonts are scaled smaller than they need to be.

This can be fixed with the a meta element in your html head. like so:

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

or whatever width is appropriate for your site. The width of the iPhone in portrait mode is 320 pixels. I’m using this for thirstymind.org, although I may increase to 780 which is the actual width of the content here.

Here are the before and after photos (yeah, i know they are blurry), you’ll notice the empty side bars are gone, which makes the main column readable by default.

Before:

thirstymind.org on an iPhone

After:

thirstymind.org on an iPhone
blog comments powered by Disqus