JavaScript
Article
By Sam Deering

js ipad zoom control techniques

By Sam Deering
Help us help you! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

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

--ADVERTISEMENT--

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

Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?