2

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

  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 元素）。

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

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

您可以进一步缩小，但内容会卡住，并且您无法在不重新加载页面的情况下调整其大小。

有谁知道解决这个问题的方法？如有必要，我很乐意尝试其他框架。

4

1 回答 1

2

要允许缩小，您可以使用您确定的 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(your_width);

于 2012-12-16T03:54:21.890 回答