如何在移动设备上的页面或div上进行缩小 [英] How to make zoom-out on page or div on mobile

问题描述

我在使站点缩小方面遇到问题. 当我设置<meta name="viewport" content="width=device-width, initial-scale=1">时，页面可以放大，但不能缩小.通过添加最大比例尺和最小比例尺，我遇到了相同的问题. 我该怎么办? 我的主要目标是只能在一个div上(通过手势在移动设备上)放大和缩小(特别是缩小).也许有人知道我可以在哪里找到执行此操作的脚本或知道解决方案?

I have problem with make site to be able to zoom out. When i set <meta name="viewport" content="width=device-width, initial-scale=1"> the page can be zoomed in but can`t be zoomed out. With adding maximum-scale and minimum scale I have the same problem. What should I do? My main goal is to is zoomable in and out (specially zoom-out) only one div (on mobile via gestures). Maybe somebody know where I can find script which do that or know the solution?

推荐答案

如果正确理解您的要求，则希望能够捏"特定元素(例如div).

If understand you correctly, you want to be able to "pinch" on specific element (e.g. div).

您可以使用IScroll.

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

http://iscrolljs.com/#zoom

代码和演示(从移动设备运行)

http://jsbin.com/luqifu

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

html, body {
  width:320px;
  height:480px;
  overflow:hidden;
}

body {
  margin:0;
}

#wrapper {
  width:100%;
  height:100%;
}

img {
  width:100%;
}

<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>

这篇关于如何在移动设备上的页面或div上进行缩小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！