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.

Feel free to leave a reply here...

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