-1

jqueryアプリでズームを有効にするために、次のコードを追加しました。

<meta name="viewport" content="user-scalable=yes" />

以下は、本文のコードです。

<div id="header" data-theme="b" data-role="header">
      <h5>
            Book
      </h5>
</div>
<div data-role="content">
      <canvas id="myCanvas" width="300" height="400" style="border:1px solid #d3d3d3;">
</div>

キャンバス画像を拡大した後、スライドしてキャンバスの他の部分を表示できません。また、「本」という見出しもズームされているようです。スライドの問題を修正し、ズーム効果の影響を受けずに見出しを変更せずに保持するにはどうすればよいですか？

どうもありがとう

4

1 に答える 1

0

これがデフォルトのズーム動作です。

変更するには、まずビューポートを次のように変更します

<meta name="viewport" content="user-scalable=no" />

これでは、ユーザーはズームできません。

次に、javascriptを使用して必要な要素のズームを処理する必要があります。pinch gestureジェスチャに応じて、css3を使用して（そのためのライブラリがあります。たとえば、hammer.js）を検出transform scaleして、大きくしたり小さくしたりする必要があります。そしてdrag gesture、transform translate要素を移動するには

または、 iScrollも試すことができます。ピンチ/ズーム/ドラッグで正常に機能するズームオプションがあります。

于 2013-03-27T10:24:05.413 に答える