Question

I am designing a mobile website and I first tried just to use a regular html page with a h1 tag. It looks very tiny so I searched and found out that I need to add these lines:

<meta name="viewport" content="width=device-width" /> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />

After trying several web pages to understand it, I still am confused. Is the viewport an additional device-width that on for example iPhone is 960px? Even though the iPhone 4 is only 640px so it scales it down to emulate that size? So in order to prevent it from thinking the viewport is 960px it says that it is equal to the size of the screen?

If this is the case, does other browswers/devices such as Android running devices have different widths (other than 960px)?

Answer 1

Per the jquery mobile documentation, there is a bug for iOS with this:

There is a minor issue in iOS that doesn’t properly set the width when changing orientations with these viewport settings, but
this will hopefully be fixed a a future release. You can set other
viewport values to disable zooming if required since this is part of
your page content, not the library.

They recommend the follow line:

<meta name="viewport" content="width=device-width, initial-scale=1"> 

You also don’t need the user-scalable either, the above line won’t disable user zoom.