ipad - 在 iPad Safari 上限制 Canvas 捏缩小

Question

我有这个 fiddle

JS Fiddle

我想限制 iPad Safari 上 Canvas 的缩放。当我捏出 Canvas 时， Canvas 会缩小并变小。有什么办法可以限制这个特定设备上的缩小级别？我正在使用 KineticJS。

这是我在 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

添加视口(viewport)元标记:<meta name="viewport" content="width=device-width, user-scalable=no"> .这将防止页面缩放，同时仍然允许您的应用程序抓取 Javascript 事件。