Constrain Your Viewport for iPhone Web Development

iPhoney Screenshot

So I’ve sitting around the coffee shop this morning trying to figure out how to develop an application that looked hot on an iPhone. I have a 320 pixel width screen to work with.

On the iPhone version of Safari, it’s designed to show Web sites that are made for your desktop.

If you tell the CSS to make the width of your site only 320 pixels, it will look all zoomed out, like as if you were viewing a Web site that was 1200 pixels wide.

You have to constrain the viewport in a meta tag. Like…

<meta name=”viewport” content=”width=320″ />

With this, your site will only take up the 320 pixels of width that are available on the iPhone. Check out my iPhone screen size test page.

I found this by scouring the code of (the iPhone friendly twitter app.)

3 thoughts on “Constrain Your Viewport for iPhone Web Development”

  1. We are having a lot of discussion about the use of width=320 in the community. So far we are recommending that you also turn off scaling, as even when you have the width correct it will sometimes get messed up after text-input or orientation changes.

    We are initially recommending the following tag in your :

    This will address 90% of most people’s needs until we figure out some better answers. The biggest issue is how to adapt to horizontal/landscape orientation.

    There are also number of different meta tags to choose from that may be of use, check out the conversations yesterday and today at, in particular the thread archived at

    There is also a free barcamp style conference in SF next week for iPhone developers — info at

    Spread the word to other iPhone web developers!

  2. iPhone Web Developer Tool

    This application allows you to use your iPhone for Web Developing. You can View Source, Find on Page, Outline Divs & Tables, etc. Similar to the Firefox Web Developer Extension. Simply drag bookmarks into the web browser that you have your iPhone or iPod Touch synced to and you’re good to go. Works on any site.

    Let me know what you think. If you have stuff you want added just let me know.

    – Peter Schmalfeldt

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s