iScroll 4：允许用户从网页内容以及放大

我想实现一个移动网站具有以下外观缩小：iScroll 4：允许用户从网页内容以及放大

固定头
滚动，缩放内容
内容加载

我一直在尝试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元素）。

而且从1修改iscroll.js（v4.2.2，线119）的zoomMin设置为较小（如0.5），打破东西：

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

您可以进一步缩小，但内容则卡和如果不重新加载页面，您无法调整它的大小。

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

来源

2012-09-27 David Jones - iPushPull

你是否真的得到这个工作？我在下面添加@ user1290746的行，当我放大时，我的“固定”页眉/页脚将脱离屏幕。 – anon

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

来源

2012-12-16 03:54:21 kris

iScroll 4：允许用户从网页内容以及放大

回答

相关问题