Limit canvas pinch zoom out on iPad Safari - ipad

Question

I have this fiddle
JS Fiddle
I want to limit the pinch zoom out of a canvas on iPad Safari. When i pinch out the canvas shrinks and becomes small. Is there any way i can limit the zoom out level on this particular device? I am using KineticJS.
Here's my code below of the fiddle
div id="container"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
init();
});
function init() {
var lastDist = 0;
var startScale = 1;
function getDistance(p1, p2) {
return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2));
}
var image = new Image();
image.onload = function() {
kimage = new Kinetic.Image({
image: image,
x : 0,
y : 0
});
var stage = new Kinetic.Stage({
container: 'container',
width: 500,
height: 500
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group({
draggable: true,
dragBoundFunc: function(pos) {
var newX = 0;
if (pos.x < 0) {
newX = pos.x < stage.getWidth() - kimage.getWidth()
? stage.getWidth() - kimage.getWidth() : pos.x;
}
var newY = 0;
if (pos.y < 0) {
newY = pos.y < stage.getHeight() - kimage.getHeight()
? stage.getHeight() - kimage.getHeight() : pos.y;
}
return {
x: newX,
y: newY
};
}
});
stage.getContent().addEventListener('click', function(evt) {
var touch1 = evt.touches[0];
var touch2 = evt.touches[1];
if(touch1 && touch2) {
var dist = getDistance({
x: touch1.clientX,
y: touch1.clientY
}, {
x: touch2.clientX,
y: touch2.clientY
});
if(!lastDist) {
lastDist = dist;
}
var scale = stage.getScale().x * dist / lastDist;
stage.setScale(scale);
stage.draw();
lastDist = dist;
}
}, false);
stage.getContent().addEventListener('touchend', function() {
lastDist = 0;
}, false);
group.add(kimage);
layer.add(group);
stage.add(layer);
layer.draw();
}
image.src = 'http://www.ourclientwebsites.com/html5/images/1.jpg';
}
</script>

Answer 1

Add a viewport meta tag:<meta name="viewport" content="width=device-width, user-scalable=no">. This will prevent the page from zooming, while still allowing your app to grab the Javascript event.