Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Prevent zoom on focus
// * iOS zooms on form element focus. This script prevents that behavior.
// * <meta name="viewport" content="width=device-width,initial-scale=1">
// If you dynamically add a maximum-scale where no default exists,
// the value persists on the page even after removed from viewport.content.
// So if no maximum-scale is set, adds maximum-scale=10 on blur.
// If maximum-scale is set, reuses that original value.
// * <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=2.0,maximum-scale=1.0">
// second maximum-scale declaration will take precedence.
// * Will respect original maximum-scale, if set.
// * Works with int or float scale values.
function cancelZoom()
var d = document,
maxScale = ',maximum-scale=',
maxScaleRegex = /,*maximum\-scale\=\d*\.*\d*/;
// this should be a focusable DOM Element
if(!this.addEventListener || !d.querySelector) {
viewport = d.querySelector('meta[name="viewport"]');
content = viewport.content;
function changeViewport(event)
viewport.content = content + (event.type == 'blur' ? (content.match(maxScaleRegex, '') ? '' : maxScale + 10) : maxScale + 1);
// We could use DOMFocusIn here, but it's deprecated.
this.addEventListener('focus', changeViewport, true);
this.addEventListener('blur', changeViewport, false);
// jQuery-plugin
$.fn.cancelZoom = function()
return this.each(cancelZoom);
// Usage:

jakob-e commented Dec 11, 2013

Thanks :)

Brilliant. Thanks.

This is awesome. No longer do I have to completely disable zooming on all pages.

Got one follow-up question: how would you apply the above fix to live elements? For example, I am launching a lightbox form. As it is dynamically inserted into the DOM, the above fix does not seem to work in those cases.

jonesch commented Jun 19, 2014

Thank you.

Great, ty!


Not work in android

Brettray commented Apr 4, 2016

Where do I need to place this code to make it work?

Not working

Thank you, very useful.

Shouldn't it be $('input, select, textarea').cancelZoom(); to cover all types of inputs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment