How do you stop a web page from being zoomed from an iPhone?

Question

Some mobile web sites such as the BBC mobile website stop you zooming in on the main home page on an iPhone - how is this acheived. Is there a directive that has to be included in the HTMl code or something ?

Answer 1

You just need to tell the iPhone not to let the user zoom, with a meta-tag:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

This should still let your webpage rotate, but not zoom.

Answer 2

It's because the width of the site is set to the native resolution of the iPhone display. Mobile Safari never actually zooms past 100% on any site, on a standard sized site say (1000px wide) it is zoomed out to begin with and you specify the zoom level when double tapping or using the pinch gesture.

To achieve the same effect use a max width on your site to match the resolution of the iPhone which is 320px.

In CSS this would be done like:

div#wrapper
{
  width: 320px;
}