JavaScript - - By Sam Deering

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




This one is optimised for iPad (worked best):

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

Sponsors