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 ?
+1
A:
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;
}
sbohan
2009-04-16 11:44:53
+7
A:
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.
Ch00k
2009-04-16 11:49:15
Is this used on the bbc site though? I have just checked the source of the linked page while faking my user agent as an iPhone and it doesn't seem to use that method! Then again it doesn't use the way I described either!
sbohan
2009-04-16 11:57:21
They do have the following meta tag included but without the width=320 attribute - here is what they have:<meta name="viewport" content="initial-scale=1.0,user-scalable=false" />
cyberbobcat
2009-04-16 12:02:01
iinnnnnnnnnteresting
Andrew Bullock
2009-04-16 12:02:27
Updated. Found the code, setting the width to 320 probably stops it rotating properly. I use device-width and it rotates, but doesn't zoom.
Ch00k
2009-04-16 12:20:13
I'll give that a go. Thanks very much.
cyberbobcat
2009-04-16 12:49:01
So, in summary, it’s `<meta name="viewport" content="user-scalable=false" />`
Paul D. Waite
2009-05-17 17:52:14