Question

我有make网站可以缩小的问题。当我设置<meta name="viewport" content="width=device-width, initial-scale=1">时，页面可以放大但不能缩小。通过添加最大规模和最小规模，我遇到了同样的问题。我该怎么办？我的主要目标是可以进出可缩放（特别是缩小）只有一个div（通过手势移动）。也许有人知道我在哪里可以找到那样做或知道解决方案的脚本？

Answer 1

如果你理解正确，你希望能够“捏住”＃34;关于特定元素（例如div）。

您可以使用IScroll。

http://lab.cubiq.org/zoom/

http://iscrolljs.com/#zoom

代码＆amp;演示（从移动设备运行）

http://jsbin.com/luqifu

＆＃13;

$(window).load(function(){
  var myScroll = new IScroll('#wrapper', {
    scrollX: true,
    scrollY: true,
    zoom:true
  });
});

＆＃13;

html, body {
  width:320px;
  height:480px;
  overflow:hidden;
}

body {
  margin:0;
}

#wrapper {
  width:100%;
  height:100%;
}

img {
  width:100%;
}

＆＃13;

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll-zoom.js"></script>

<p>
  Image from <a href="https://en.wikipedia.org/wiki/Dolphin#/media/File:Dolphind.jpg">Wikipedia</a>
</p>
<div id="wrapper">
  <img src="https://upload.wikimedia.org/wikipedia/commons/b/b3/Dolphind.jpg" />
</div>

＆＃13;

如何在移动设备上缩小页面或div

1 个答案: