iScroll 4:允许用户缩小页面内容和放大页面内容

Question

我正在尝试实现一个外观如下的移动网站：

1. 固定标题
2. 可滚动、可缩放的内容
3. 首次加载页面时缩小的内容

我一直在用IScroll 4进行实验，结果似乎很好，但有一个问题我找不到解决的方法。我的页面内容是用户生成的html表，这些表通常比屏幕宽。我希望当用户登录页面时，可以看到表格的整个宽度。如果他们愿意，可以放大。

如果你在移动浏览器中查看IScroll缩放演示，它就说明了这个问题。页面内容比屏幕宽，无法缩小，只能放大。

更改视口元标记中的initial-scale没有帮助，因为包括页眉在内的整个页面都会缩小：

<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=yes, minimum-scale=0.5, maximum-scale=1.0">

(头最终将是一个JQueryMobile元素，我不想搞砸它)。

将iscroll.js(v4.2.2，第119行)中的zoomMin设置从1修改为更小的值(例如0.5)会破坏

// Zoom
zoom: false,
zoomMin: 1,
zoomMax: 4, 

你可以进一步缩小，但内容会被卡住，如果不重新加载页面，你就无法调整大小。

有人知道这方面的办法吗？如果有必要，我很乐意尝试其他框架。

Answer 1

要允许缩小，可以使用您标识的zoomMin和zoomMax，但在实例化iscroll时执行，而不是修改iscroll.js:

<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper',
{ zoom:true, onBeforeScrollStart: null, 
zoomMin:0.5, zoomMax: 6 });
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>

我还发现我需要显式设置"scroller"div的宽度，如下所示：

$('#scroller').width(your_width)；