iOS / mobile safari still zooms while viewport is set to user-scalable=no ? Check Accessibility settings!
This specific Mobile Safari (seemingly impossible and yet undocumented) problem kept me going for a long long time today, and I was just about to post a question about it here when I figured it out.
The problem: While I had set <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;"/> my iPad web-app still allowed manual zooming (pinching in the browser). -- But only on my iPad, not on my iPhone.
Also I would rotate the device between portrait to landscape modes to check the the specific orientation-mode CSS codes, which gave strange results:
- Rotating from Landscape to Portrait there was no problem, the sizes and placement of everything kind of made sense.
- After that, rotating from Portrait back to Landscape and.. the viewport stayed as wide as it was in Portrait mode, ie. it was zoomed (scaled) in. I had to manually zoom out to get back to the full picture / viewport. Which should be impossible.
Answer
I then found the great iPad CSS Layout with Landscape/Portrait Modes demo. It looked promising, but gave me the identical problem. Yet while testing this on a second iPad it worked perfect: no zooming problem whatsoever. So, we figured it had to do with my specific iPad.
Then it struck me: Weeks ago I fiddled around with the accessibility settings. Zooming in on the entire interface like you can do in OSX (ctrl+scroll) etc. Maybe this was linked to Mobile Safari in some way? Well, it turns out it is.
Today I learned: When Accessibility > Zoom is turned on, this overrules the meta viewport settings.
Try this out yourself? You'll find it here: Settings > General > Accessibility > Zoom