Setting screen width for Web sites to be viewed on iPhone

Fixing the width of the page in iPhone to a certain value is not direct. Safari is assuming an 800px width. The best solution to this is just by using the meta tags.

Check the snippet below:

To set the width to the screen width based on the mode he is in, be it landscape or potrait:

<meta name=”viewport” content=”width = device-width” />

To avoid scalability for the user:

<meta name=”viewport” content=”initial-scale=1, user-scalable=false” />

To fix the width to 320px always:

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

I would suggest you go ahead with the first two always. In this case, the screen will get a fluid layout on mode change and also browser wont scale your page based on the change. Basically you will get the site as it is.

If you dont give the scalability false, then your site will scale like a picture.