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：允許用戶從網頁內容以及放大

回答

相關問題