Skip to content

Instantly share code, notes, and snippets.

Created March 9, 2012 21:56
Show Gist options
  • Save zachleat/2008932 to your computer and use it in GitHub Desktop.
Save zachleat/2008932 to your computer and use it in GitHub Desktop.
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:
Copy link

jakob-e commented Dec 11, 2013

Thanks :)

Copy link

Brilliant. Thanks.

Copy link

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

Copy link

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.

Copy link

jonesch commented Jun 19, 2014

Thank you.

Copy link

Great, ty!

Copy link


Copy link

Not work in android

Copy link

Brettray commented Apr 4, 2016

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

Copy link

Not working

Copy link

Thank you, very useful.

Copy link

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