2

次の外観のモバイル Web サイトを実装しようとしています。

  1. 固定ヘッダー
  2. スクロール可能、ズーム可能なコンテンツ
  3. ページが最初にロードされたときにコンテンツが縮小されました

私は IScroll 4 を試してみましたが、結果は良好に見えますが、回避策が見つからないという問題が 1 つあります。私のページのコンテンツは、ユーザーが生成した 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.js を変更するのではなく、iscroll をインスタンス化するときに実行します。

 <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-16T03:54:21.890 に答える