js ipad zoom control techniques
Share
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