js ipad zoom control techniques

By 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

This one is optimised for iPad (worked best):

Get the current viewport scale using this script:


$.getScript('', 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

Get the latest in JavaScript, once a week, for free.