July 3, 2007
iPhone Hack: Make Your Website Readable on iPhone & Blackberry
Here is a simple one line change which will make your webpages viewable well on iPhone and Blackberry. Add the following to your HTML HEAD section:
<meta name="viewport" content="width=320">
Apple is using the following on their RSS reader website:
<meta name = "Viewport" content = "maximum-scale=1.6,width=320" >
The other parameters you can experiment with: initial-scale (first loaded scale), user-scalable (boolean), minimum-scale (default 0.25), maximum-scale (default 1.6).
There is an active discussion on this topic here.
Viewport is part of CSS 2.1 (link) specification. Viewport is a window or through which users view a document. User agents may change the document’s layout when the viewport is resized.
2 Comments on iPhone Hack: Make Your Website Readable on iPhone & Blackberry »
July 3, 2007
Christopher Allen @ 9:49 am:
Actually, one of my favorite variants is:
[meta name=“viewport” id=“viewport” content = “maximum-scale=0.6667; width=480?/]
This is great for simple web pages, is quite readable in both portrait and landscape, and the text flows well between the two orientations.