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 hahlo.com (the iPhone friendly twitter app.)

Advertisements

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 http://www.iPhoneWebDev.com 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 http://www.iPhoneWebDev.com, in particular the thread archived at http://groups.google.com/group/iphonewebdev/browse_thread/thread/f43493a828dffdb3

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

    Spread the word to other iPhone web developers!

  2. iPhone Web Developer Tool

    http://www.manifestinteractive.com/iphone/

    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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s