How can I prevent default double-tap behavior (zooming, panning) in Mobile Safari on iOS4?

Question

When I double-tap near the edge of a page that exceeds the height or width of the browser window in Safari under iOS4, it zooms in or out and/or scrolls up, down, right, or left, depending on the size of the page and the current viewport position. How can I prevent this behavior, please?

I'm working on a site where this is (very) bad; we're preserving several layers of menu state and scrolling horizontally to navigate between layers. Double-tapping hoses the layout, and there's no intuitive way to get it back.

Double-tap does not seem to fire a scroll or touch event as far as I can tell. Other things I've tried:

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

... with variations:

• user-scalable=no
• user-scalable=0
• width=device-width
• width=320

Answer 1

You have a small typo in you meta tag, between each setting you should use comma. ex.

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

Answer 2

It looks like making absolutely certain that none of my important elements--I have a static header, scrolling body, and static footer, and the header and body can both scroll sideways--actually exceed the viewport width and have overflow:hidden seems to have done the trick.

Very sad there's nothing official on this, because it's annoying, and breaks most of the other examples I've found online