How to make zoom-out on page or div on mobile

问题

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?

回答1:

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

You can use IScroll.

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

http://iscrolljs.com/#zoom

Code & Demo (run it from mobile device)

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>

来源：https://stackoverflow.com/questions/32188870/how-to-make-zoom-out-on-page-or-div-on-mobile

标签

javascript

jquery

html

css

mobile