🤩50% Off over 600 tech courses and books

js ipad zoom control techniques

Sam Deering

Just jotting down some techniques for zoom control on the ipad using JavaScript and viewport meta tags. Remember for iPad, device-width is always 768px irrespective of the orientation

<meta name="viewport" content="maximum-scale=1.6, minimum-scale=0.25" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

This one is optimised for iPad (worked best):

<meta name="viewport" content="maximum-scale=1.6, minimum-scale=0.25" />

Get the current viewport scale using this script: http://menacingcloud.com/source/js/FlameViewportScale.js


$.getScript('http://menacingcloud.com/source/js/FlameViewportScale.js', function()
var viewScale = new FlameViewportScale();
var currentScale = viewScale.getScale();
viewScale.update(function() { alert('Scale measure complete...'+currentScale); });

This code disables the user to rescale the viewport on page using pinch technique:

$('meta[name=viewport]').attr('content','width=1024, user-scalable=no');

Or using plain JavaScript:

viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;');

js ipad auto zoom
js ipad zoom buttons
js ipad simulate pinch out
js ipad change viewport
ipad change the Viewport Scale