5

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
  • I'm interested in this, more from the angle of "why can't i zoom in on some sites?" Apr 16, 2009 at 11:43

2 Answers 2

10

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.

5
  • 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! Apr 16, 2009 at 11:57
  • 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" /> Apr 16, 2009 at 12:02
  • 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. Apr 16, 2009 at 12:20
  • So, in summary, it’s <meta name="viewport" content="user-scalable=false" /> May 17, 2009 at 17:52
  • FYI, browsers will complain if you separate the values using a semicolon. They must be separated by a comma instead: andymatthews.net/read/2012/05/10/… Nov 10, 2012 at 3:34
1

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;
}

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.