Create a gist now

Instantly share code, notes, and snippets.

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,
viewport,
content,
maxScale = ',maximum-scale=',
maxScaleRegex = /,*maximum\-scale\=\d*\.*\d*/;
// this should be a focusable DOM Element
if(!this.addEventListener || !d.querySelector) {
return;
}
viewport = d.querySelector('meta[name="viewport"]');
content = viewport.content;
function changeViewport(event)
{
// http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/
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
(function($)
{
$.fn.cancelZoom = function()
{
return this.each(cancelZoom);
};
// Usage:
$('input:text,select,textarea').cancelZoom();
})(jQuery);
@jakob-e
jakob-e commented Dec 11, 2013

Thanks :)

@lingokid

Brilliant. Thanks.

@fchristant

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

@fchristant

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
jonesch commented Jun 19, 2014

Thank you.

@mbatalla

Great, ty!

@renatocarvalho

Thanks!

@slaffko1

Not work in android

@Brettray
Brettray commented Apr 4, 2016

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

@sarambasic

Not working

@luaddetzito

Thank you, very useful.

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