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:
How do you disable enable pinch zoom for your web app? To disable pinch-zoom in HTML, simply add <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> to the <head> section.
initial-scale=1 sets the initial zoom of the page to 1.0 of that width, or no zoom at all. maximum-scale=1 fixes the maximum scale of the page to 1.0. This prevents Safari from auto-zooming while still allowing the user to zoom in manually.
Open the Settings app , then scroll down and tap Safari. Scroll down and tap Page Zoom. Tap which percentage you would like the default zoom level to be for all websites.
Turn off Zoom in Settings on your device If you can't access Settings because your Home screen icons are magnified, double tap with three fingers on the display to zoom out. To turn off Zoom, go to Settings > Accessibility > Zoom, then tap to turn Zoom off.
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With