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.

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

As someone with vision problems I'm heavily reliant on being able to zoom mobile sites. Now with the update to iOS 5 there's no way of getting iOS to ignore the user-scalable setting anymore and I suddenly discover I can't use half the web sites I use regularly anymore because I can't zoom them.

So, on behalf of people with vision problems, I beg you to please not use viewport meta tags to restrict peoples' ability to zoom your site!

Just a little update for you: this has been fixed by Apple. As of iOS 5 beta 1, the Zoom accessibility setting will no longer cause the viewport meta tag to be ignored.

Note: use commas as separators, not semicolons. The clean way are commas as separators. See the documentation page http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html, they do use commas too. And at least Chrome shows errors in the console if you use semicolons. I know, that this does not affect iPad or safari, but if you can do it clean, why not? :)