I made a bookmarklet for that reason:

    javascript:m=document.querySelector('meta%5Bname=viewport%5D');m.content=m.content.replace(/.*(width=%5B%5E,%5D+).*/,%22$1,maximum-scale=10,minimum-scale=0.1,user-scalable=1%22);

And a second one to disable CSS-based responsiveness:

    javascript:m=document.querySelector('meta%5Bname=viewport%5D');m.content=%22width=1024,maximum-scale=10,minimum-scale=0.1,user-scalable=1%22;

What's a good way to easily call up bookmarklets on mobile? I use short, unique bookmark names. If you know of any better method, I'd love to hear it :)

Firefox for Android has the Always Zoom extension, https://addons.mozilla.org/en-US/android/addon/always-zoom/?....

I really want a "disable zoom disable" button.

HM doesn't disable zoom, it just displays in a teeny tiny font.

This is a well known and hard to fix bug that I've been following. It affects other websites too, typically forums and other pages with large tables and short paragraphs of text.

https://bugzilla.mozilla.org/show_bug.cgi?id=707195

> That's just a stupid choice made by (so many) web developers.

Sometimes it's stupid, sometimes not. Disabling zoom removes the 300ms delay added to most interactions on mobile devices [1]. You can alternatively use fastclick.js [2] or swiftclick.js [3], but that's an extra lib/http request to load.

[1] http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-a...

[2] https://github.com/ftlabs/fastclick

[3] https://github.com/tmwagency/swiftclick

According to your first link, there is no reason to disable zoom. This gives you the best of both worlds:

    <meta name="viewport" content="width=device-width">

It retains zoom and gets rid of the 300ms delay. At least in chrome, so the site says.

FF says this issue is "RESOLVED FIXED", so maybe they implemented it too:

https://bugzilla.mozilla.org/show_bug.cgi?id=941995

I have that meta tag on all my sites and I just tested on Android and iOS: Clicking on links and other controls seem instant. And zoom works. Hurray!

    "<meta name="viewport" content="width=device-width">"

Which is just what I do. Disabling zoom is one of those nonsensical practices that spreads as web "developers" copy code from each other. I suppose there's a use case for it somewhere, but its main purpose is to remove choice and make sites harder to use.

EDIT: Actually I also include the initial-scale as in the comment below.

I have

    		<meta name="viewport" content="width=device-width, initial-scale=1.0">

Huh. I only have the initial-scale entry, and I think that my sites always show up with page width matching device width as a result. Is there something important that the extra width specification does that I'm missing?

ah excellent, went ahead and updated my properties :)

Disabling zoom prevents people with visual acuity issues from browsing your site.

I know only lip-service is paid towards accessibility but zoom shouldn't be able to be disabled except by the user.

I disable zoom to prevent IOS and Android from zooming in when a textbox is focused. How else can I prevent this?

Why do you feel you need to prevent it? As a user I'm pretty sure I'd rather just zoom back out if I want to, or use a browser that didn't do this if it really bothered me. But not having the option to zoom is annoying.

As a front-end dev, I'm really curious about this. If you're using a native mobile app, do you expect the UI to zoom in on text inputs as well? Is that a common UI behavior?

I've always been a fan of moving mobile web towards the standards and behaviors of native apps which generally did not require zooming to get tasks done.

Yes, it does happen on some text inputs, it tends to depend on relative size (for example, I recall zoom in landscape but not necessarily in portrait, etc.).

Generally I welcome it, because I can click on the teeeny input field and have it come "closer" to me for editing then get out of the way.

As a user I find having to do this incredibly annoying.

Maybe my phone is just a little zealous with the zooming, but it loves to zoom into the top-left corner of the textarea. The first thing I do uses three pinches' worth to zoom back out, and if I ever have to move the cursor and thus touch into the textarea again, it zooms in again.

Make the font of your input larger: http://stackoverflow.com/a/6394497/93995.

It used to be the case and I think still is for a large case of mobile/tablet devices to just set font size on inputs to 16px.

I think with ios 8 this has changed.

There's a magic font-size that prevents this... I think it was around 19px, but I'm not sure...

FYI, it seems to be 16 http://stackoverflow.com/questions/2989263/disable-auto-zoom...

For someone who just heard about this change, what Google tool are you referring to?

Presumably https://www.google.com/webmasters/tools/mobile-friendly/

See also http://googlewebmastercentral.blogspot.com/2014/11/helping-u... and http://googlewebmastercentral.blogspot.com/2015/02/finding-m...

Awesome, thank you!

I disabled zoom on a web property i own because it played havoc with a `position:fixed` top header. When you zoom in, the top header scales up as well and covers the entire content.

This may not be within your power, but you should consider removing the fixed header instead. They take up precious screen real space on already small devices, usually in the name of branding.

I disagree. People needs to have fixed headers that auto hides on scroll down and auto shows when you start scrolling up.

Due to that low screen real estate there is an extreme amount of scrolling down, whenever you need that header to navigate you end up needing to scroll a long way to the top.

Links from the bottom are easily forgotten about when you're half or 80% of the way through an article. Likewise follow you around widgets are a painful annoyance 100% of the time.

> I disagree. People needs to have fixed headers that auto hides on scroll down and auto shows when you start scrolling up.

I still find that very annoying. Sometimes I have to scroll up and find that damn thing covering part of my screen again.

Fortunately I have a bookmarklet that zaps all the position:fixed elements to static :) It works brilliantly in 99.9% of the cases :)

https://gist.github.com/tripzilch/5656025

Same point as ChrisLTD, but less nice. I don't like your position:fixed top header and will likely avoid your site because of it.