I'm writing a CSS book

JavaScript archives Compatibility Thidrekssaga QuirksBlog Donations CSS book Politics Mobile About COH

contact

user-scalable=no and suppressing zoom suppression

The story goes as follows: Once upon a time there was a meta viewport property called user-scalable=no that suppressed pinch zoom on the page it was on. As a result users could not zoom in, even if they needed to. This was obviously a bad idea, and therefore browsers stopped supporting it.

At least, I thought that was the story. Turns out it isn’t.

This weekend I was alerted that suppressing zoom still works in Android browsers, though not on iOS. A quick test determined that Chrome, Edge, Firefox, and UC on Android obey user-scalable=no and do not allow the user to zoom. Only Samsung Internet keeps its cool and allows zooming.

<meta name="viewport" content="width=device-width,
	user-scalable=no">

Awful. Also, gatekeeping

Just in case you need it spelled out: suppressing user zooming is awful.

Despite the continuing perfection of my 50-year-old eyesight, the vast worldwide conspiracy that is resizing all fonts to smaller and smaller values forces me to zoom in on sites whose clueless designers — who I believe should be relegated to designing physical flyers for third-rate coke-fueled ad agencies, even though that thought makes me a gatekeeper, which is much worse than shitting all over basic web accessibility, so let me stress how wonderfully welcome to our world these designers are — think a 6px font is the most fitting choice.

When I can’t zoom in I get cranky and write snarky comments on my blog.

Technical details

Let’s return to the positive and praise Apple for a short while. On iOS, suppressing zoom has been disabled since iOS 10, though an exception was made for the WebView, because it might not be fitting to zoom a part-native-part-WebView application. Mmmm ... ok, I kind-of see the point here.

Still, it’s possible to turn off zoom suppression programmatically in the WebView, and rather to my surprise the creators of Chrome on iOS — which, remember, uses the iOS WebView, and not Blink, as its rendering engine — chose to do so. Or maybe the default has changed, I don’t know. In any case Apple is mostly on the right track.

So is Samsung; by default, zooming is enabled. Yay! My choice for Samsung Internet as my default mobile browser has been vindicated. I’ll stick to it, thanks so much.

The other Android browsers, Chrome, Edge, UC, and Firefox, all suppress user zooming. The fun part is that the Chromium-based browsers only need user-scalable, while the =no bit is strictly optional. To prove this point I ran a test with user-scalable=anti­disestablish­mentaria­nism. It suppresses zoom in the Chromium browsers. Apparently pinch zoom favours dis­esta­blish­ment.

Firefox has a somewhat more strict syntax, where user-scalable without arguments suppresses zooming, as do the arguments no and 0, but any other value is rejected and does not suppress zooming.

Fortunately an explicit user-scalable=yes or 1 works in all browsers, and zooming is not suppressed.

On the whole, double-tap zooming is also suppressed in these instances. I must admit I did not test this for all possible arguments in all browsers, but since it makes sense that all types of user zooming would be suppressed, I am willing to believe there is no difference between pinch zoom and double-tap zoom.

User settings

I seem to remember that Google said at one point that they’d remove zoom suppression, and, judging from the thread, so did others. I searched and searched, but could only find the 2013 bug report that caused user-scalable to be added to the browser. So I think I just misremember; or maybe it was floated as an idea at one point but never got implemented.

For a moment I thought the default had changed several times, when an old Chrome 47 I found on one phone did allow me to pinch-zoom, but on further investigation it turned out I had switched on the setting that allows me to zoom. After I switched it off zoom suppression was enabled.

Let’s talk about settings. Chrome, Edge, and Firefox allow users to override user-scalable=no and suppress zoom suppression. (Does that last clause sound complicated to you? Congrats, you now understand part of the problem.)

Here are the settings:

• Chrome on Android: Settings -> Accessibility -> Force enable zoom
• Edge on Android: Settings -> Accessibility -> Force zoom
• Firefox on Android: Settings -> Accessibility -> Zoom on all web sites
• Samsung Internet: Settings -> Appearance -> Control the zoom on web pages; turned ON by default
• UC on Android: Tools -> Settings (unclear gear icon) -> Browser Settings -> Font & Layout -> Force page to Zoom; BUT turning this on does nothing

Both Samsung Internet and UC have a setting as well, but Samsung Internet’s is turned on by default (i.e. it suppresses zoom suppression), while switching UC’s setting does nothing: zooming is still suppressed.

Point is: no user uses these settings, or will even know where to find them. (Be fair: would you have found them in all browsers? Would you have looked?)

OK, if you have really desperate need you might find the setting you require, but average run-of-the-mill users do not use settings, do not suppress zoom suppression, and don’t even know that they’re missing something.

In order to emulate the true user experience I never touch the settings on my test browsers. You should do the same. You should see what users see.

So user settings are not the solution. The default enabling of zoom suppression is wrong because users will not be aware they can change it.

Google, Mozilla, UC, Microsoft, up your game. Make suppression of zoom suppression the default. Make sure users can always zoom. As an added bonus we can throw all those third-rate designers who cannot design for the web under the train. (Or bus. Or car. I’m flexible.)