javascript - iScroll 4 : Allow users to zoom out from page content as well as zoom in

Question

我正在尝试实现一个具有以下外观的移动网站:

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

我一直在试验 IScroll 4，结果似乎不错，但有一个问题我找不到解决办法。我页面的内容是用户生成的 html 表格，通常比屏幕宽。当用户登陆页面时，我希望表格的整个宽度都可见。然后他们可以根据需要放大。

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

更改视口(viewport)元标记中的 initial-scale 无济于事，因为整个页面(包括页眉)都被缩小了:

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

( header 最终将成为我不想弄乱的 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>

我还发现我需要显式设置“滚动条”div 的宽度，如下所示:

$('#scroller').width(你的宽度);