js ipad zoom control techniques

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 Code:

$.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;');

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

Frequently Asked Questions about JavaScript iPad Zoom Control Techniques