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,
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

This comment has been minimized.

Show comment Hide comment
@jakob-e

jakob-e Dec 11, 2013

Thanks :)

jakob-e commented Dec 11, 2013

Thanks :)

@lingokid

This comment has been minimized.

Show comment Hide comment
@lingokid

lingokid Dec 11, 2013

Brilliant. Thanks.

Brilliant. Thanks.

@fchristant

This comment has been minimized.

Show comment Hide comment
@fchristant

fchristant Mar 17, 2014

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

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

@fchristant

This comment has been minimized.

Show comment Hide comment
@fchristant

fchristant Mar 28, 2014

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.

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

This comment has been minimized.

Show comment Hide comment
@jonesch

jonesch Jun 19, 2014

Thank you.

jonesch commented Jun 19, 2014

Thank you.

@mbatalla

This comment has been minimized.

Show comment Hide comment
@mbatalla

mbatalla Jun 26, 2014

Great, ty!

Great, ty!

@renatocarvalho

This comment has been minimized.

Show comment Hide comment
@renatocarvalho

renatocarvalho Jul 17, 2014

Thanks!

Thanks!

@slaffko1

This comment has been minimized.

Show comment Hide comment
@slaffko1

slaffko1 Nov 12, 2014

Not work in android

Not work in android

@Brettray

This comment has been minimized.

Show comment Hide comment
@Brettray

Brettray Apr 4, 2016

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

Brettray commented Apr 4, 2016

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

@sarambasic

This comment has been minimized.

Show comment Hide comment
@sarambasic

sarambasic Apr 5, 2016

Not working

Not working

@luaddetzito

This comment has been minimized.

Show comment Hide comment
@luaddetzito

luaddetzito Apr 5, 2016

Thank you, very useful.

Thank you, very useful.

@MustafaMagdi

This comment has been minimized.

Show comment Hide comment
@MustafaMagdi

MustafaMagdi Dec 8, 2016

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

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