user-scalable=like, whatever

22 Oct 2013

[estimated reading time =no;]

If you want to prevent zooming on a mobile device, you can use the so-called "viewport meta tag" and the special user-scalable property to ruin your user's day.

If you'd like to actually learn how to use it properly, there's some good articles out there. But between you and me, dear reader, we both know you came here for the same reason that traffic slows down when there's someone pulled over on the other side of the freeway. That's right, this is web forensics rubbernecking.

The best part about shipping web features without writing specs or bringing them to standards bodies is watching them mutate from some mildly descriptive documentation to what can only be described as flying by the seat of one's pants.

Let me show you how people try to disable viewport zooming on the web. Some of these even work.

<meta name="viewport" content="user-scalable=no"> <meta name="viewport" content="user-scalable=0"> <meta name="viewport" content="user-scalable=false;"> <meta name="viewport" content="width=device-width, user-scalable=-1;" /> <meta name="viewport" user-scalable="0;" /> <meta name="viewport" content="maximum-scale=1.0, user-scalable=2.0;" /> <meta name="viewport" content="maximum-scale=3.0, user-scalable=3;"/>

(Who knows what's going on in the last two examples.)