Limit canvas pinch zoom out on iPad Safari

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.