JavaScript
Article

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

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

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