移动浏览器中的Zoomable/Scrollable HTML"窗口"

Question

我正在尝试创建一个<div>内部元素的窗口,以便能够在移动设备上滚动/缩放其内容,如下所示:

http://jsfiddle.net/hk1jfp4z/

我希望能够做到以下几点:

1. 页面加载:缩放#scrollable_zoomable_background以适合#window.
2. 为了能够用两个手指手势进行缩放,请使用touchstart,touchend进行滚动
3. 页面的其余部分不能缩放,也不能水平滚动(带<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>)
4. 在#window一定不可以出现在iframe,它需要的文档结构的一部分.

Answer 1

首先,您应该设置viewport禁用将页面缩放到用户.然后你需要使用像hammer.js这样的触摸事件库.

这是标准视口:

<meta name="viewport" content="width=device-width, initial-scale=1">

查看锤子文档 - 您可以看到pinch识别器的一个示例- 这正是您需要的!

Answer 2

根据AleshaOleg的回答,这里有一个函数如何使用HammerJS实现捏缩放 - >请参阅http://codepen.io/sheinzle/pen/mebBEd上的笔

显然还有很多需要改进的地方 - event.originalEvent.gesture.scale下次重做手势时重置为1.所以你需要跟踪当前的比例.

function attachPinch(imgID)
{
    var image = $(imgID);
    $(imgID).hammer().on("pinch", function(event) {
        var el = $(this);
        scale = event.originalEvent.gesture.scale;
        el.css('-webkit-transform', "scale3d("+scale+", "+scale+", 1)");   
   });
}

attachPinch('.pinch-object')

.pinch-object {
  width: 5000px;
  height: 5000px;
  
  background-color:#269;
  background-image: linear-gradient(white 2px, transparent 2px),
  linear-gradient(90deg, white 2px, transparent 2px),
  linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
  background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
  
}

 <script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/hammerjs/jquery.hammer.js/master/jquery.hammer.js"></script>

<div class="pinch-object"></div>