Question

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

固定标题
可滚动，可缩放的内容
内容在首次加载页面时缩小

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

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

更改视口元标记中的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元素。）

将zoomMin（v4.2.2，第119行）中的iscroll.js设置从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);

iScroll 4：允许用户缩小页面内容以及放大

1 个答案: