移动浏览器中的可缩放/可滚动 HTML“窗口”答案

【问题标题】：Zoomable/Scrollable HTML "window" in mobile browsers移动浏览器中的可缩放/可滚动 HTML“窗口”
【发布时间】：2015-11-10 01:52:06
【问题描述】：

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

http://jsfiddle.net/hk1jfp4z/

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

页面加载时：缩放#scrollable_zoomable_background 以适应#window。
要能够使用两个手指手势进行缩放，请使用 touchstart、touchend 滚动
页面的其余部分不得缩放，也不得水平滚动（使用<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>）
#window 不能是 iframe，它必须是文档结构的一部分。

【问题讨论】：

标签： javascript html css responsive-design

【解决方案1】：

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

这是标准视口：

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

看看documentation 的锤子 - 你可以看到pinch 识别器的例子 - 这正是你需要的！

【讨论】：

如您所见，我在问题中提到的标准视口。至于使用锤子，我至少会欣赏一个 jsfiddle。
@Vojtěch 很抱歉，但我的手机无法使用此功能。我找到了this 的例子。它使用iscrolljs。那么，您可以在您的设备上查看它吗？
@Vojtěch 我尝试使用锤子 - 但如您所知，我无法在设备中检查它。请看一下这个example，在那里你可以用鼠标拖动图片，但我不确定捏。

【解决方案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>

【讨论】：