html - Web site does not allow zooming out or scrolling on iOS

Question

Part of our web site has a mobile version, but for the Blogs section (all our PHP content) we decided to just offer mobile users the desktop site (for now).

This works fine on iPad, but on iPhone (iPhone 4S/iOS6 tested) the page loads zoomed into the top left corner and you can't zoom out or even scroll sideways to the content that's cut off.

I have tried playing with the meta viewport tags, but no combination of parameters seems to fix this. I have tried <meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=.75, user-scalable=yes" />

Please view this URL on an iPhone : http://www.finecooking.com/blogs

Answer 1

Try searching on your css if you set an specific height or an overflow: hidden to the body or html or maybe a wrapper.

Answer 2

First of all thank you Craig for the answer, as it turns out you can have overflow:hidden on body, but not on html.

In my case this broke also the scroll in an embedded iframe, which is weird, but the css down below fixed it.

Scroll won't work:

html, body {
    /*common stuff */
    overflow: hidden;
}

Scroll will work:

html, body {
    /* common stuff */
}
body {
    overflow: hidden;
}

Answer 3

This works for me in iPad, and iPhone:

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