我正在尝试使用内部元素创建一个<div>
窗口,以便能够在移动设备上滚动/缩放其内容,如下所示:
我希望能够做到以下几点:
#scrollable_zoomable_background
以适合#window
。<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>
)#window
不能是iframe,它必须是文档结构的一部分。答案 0 :(得分:9)
首先,您应该设置viewport
以禁用将页面缩放到用户。然后,您需要使用像hammer.js这样的触摸事件库。
这是标准视口:
<meta name="viewport" content="width=device-width, initial-scale=1">
查看documentation锤子 - 您可以看到pinch
识别器的示例 - 正是您所需要的!
答案 1 :(得分:5)
根据AleshaOleg的回答,这是一个如何使用HammerJS实现捏缩放的功能 - &gt;在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')
&#13;
.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;
}
&#13;
<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>
&#13;