Categories
Cool Stuff HTML iPhone Mobile Web

Define a Viewport for Mobile Web Devices on your Website

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

<meta name="viewport" content="initial-scale=1.0" />

<meta name="viewport" content="user-scalable=false" />

<meta name="viewport" content="width=480, initial-scale=1.0" />

viewport is a formatting model for media in the css2.1 spec, where it’s a window or other form of viewing area on screen, through users view a document or website.

The iPhone’s resolution is 320x480px or 480x320px in landscape (which is how most people browse really).

This can be very handy for reading terms and conditions and so on.

Craig Hockenberry has figured out the “perfect” viewport and is avaliable here: http://furbo.org/2007/07/24/one-line-of-code/

Thought this would help anyone designing a website for purely mobile purposes.

Don’t forget that the iPad and iPod will pick up on this, aswell as Blackberry’s etc

Leave a Reply

Your email address will not be published. Required fields are marked *