8

いくつかの画像を表示したい動作中のJQMアプリケーションがあります。画像は現在独自のiframeにあるため、アプリとは別にスクロールできます。

iframe内の画像のみをピンチズームできるようにしたいと思います。

次のコードスニペットを調整すると、ピンチズームを有効にできることがわかりますが、これにより、アプリケーション全体で有効になります。 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

最大スケールのピンチズームリターンを削除することによって、しかしすべてのために。

画像に対してのみピンチズームを有効にする方法はありますか？新しいビューポートタグをiframeに追加するのはどうですか？それが可能であれば、それは機能しますか？

アップデート

  • HTMLをiframeに挿入しました。メタタグを追加しましたが、これは役に立ちませんでした。

  • .extend（$。mobile.zoom、{locked：false、enabled：true}）;を試しました。iframe本体では、これは何もしませんでした。

4

4 に答える 4

6

あなたは画像でこれを行うことができます：

var image=document.getElementById('imageId');

image.addEventListener('gesturechange',function(e){

    if(e.scale>1){
        //zoom in 
        //increase the size of image according to the e.scale
    }

    else if(e.scale<1){
        //zoom out 
        //decrease the size of image according to the e.scale
    }
});
于 2012-12-12T04:46:56.440 に答える
1

（ハック）回避策として、ユーザーがピンチジェスチャを実行していることを検出し、 CSS変換を使用して画像をズームすることができます。

于 2012-07-03T21:39:49.337 に答える
0

これを行う最良の方法は、ChildBrowserプラグインを使用することです。これはIOSとAndroidで、画像に最適です。

IOSチャイルドブラウザ：

 https://github.com/purplecabbage/phonegap-plugins/tree/master/iPhone/ChildBrowser

Android ChildBrowser：

 https://github.com/phonegap/phonegap-plugins/tree/master/Android/ChildBrowser

次に、すべてのセットアップが完了したら、次のようにURLまたはローカルファイルを開くことができます。

 window.plugins.childBrowser.onLocationChange(location);

IOSとAndroidの間の完全なクロスプラットフォーム設定では、両方とも異なるバージョンのプラグインが必要であることに注意してください。IOSではonDeviceReadyでChildBrowserinitが必要ですが、Androidでは必要ありません。

于 2012-09-10T17:58:46.453 に答える
0

ある種のウィジェットを使用して画像をインプレースでズームイン/ズームアウトしますか？例： http： //0.s3.envato.com/files/78471334/index.html
https://github.com/timmywil/jquery.panzoom

于 2015-01-27T18:33:09.243 に答える