iPhone Hack: Make Your Website Readable on iPhone & Blackberry

By Angsuman Chakraborty, Gaea News Network
Monday, July 2, 2007

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.

Update: I have added the solution to this site’s template. All the pages should now be readable on iPhone & Blackberry. If you own an iPhone I would appreciate if you can view this site in iPhone and let me know how it looks.

Discussion

Gio
March 10, 2010: 4:01 am

I find it slightly ironic that while reading this article on an iPhone I have to scroll back and forth…

December 10, 2009: 11:47 am

I just started looking into how to make my websites “iPhone friendly” and would like to know when you have this page ready again - with the code. Currently not loading on my iPhone at all but loaded on my laptop. Best of luck and happy holidays!

May 6, 2009: 12:50 am

your site doesn’t resize on iphone

regards,
mikael

YOUR VIEW POINT
NAME : (REQUIRED)
MAIL : (REQUIRED)
will not be displayed
WEBSITE : (OPTIONAL)
YOUR
COMMENT :