モバイルウェブアプリ(Android、iOS)でスワイプイベントを利用したいと考えていますが、ズーム機能を維持するには、ブラウザーのネイティブピンチも必要です。
Hammer.jsなどのさまざまなタッチイベントライブラリを使用してみましたが、スワイプが処理されると、モバイルSafariのピンチトゥズーム機能がすべて破棄されるようです。また、垂直スクロールをそのままにしておくと便利です。
基本的に、私は左右の方向のスワイプを認識する方法を探していますが、それだけです。何か案は?
モバイルウェブアプリ(Android、iOS)でスワイプイベントを利用したいと考えていますが、ズーム機能を維持するには、ブラウザーのネイティブピンチも必要です。
Hammer.jsなどのさまざまなタッチイベントライブラリを使用してみましたが、スワイプが処理されると、モバイルSafariのピンチトゥズーム機能がすべて破棄されるようです。また、垂直スクロールをそのままにしておくと便利です。
基本的に、私は左右の方向のスワイプを認識する方法を探していますが、それだけです。何か案は?
最近のプロジェクトでは、これと同様の機能を使用しました。ピンチズーム機能を機能させるには、ビューポートタグの値を正しく指定していることを確認する必要があります。
<meta name=viewport content="width=device-width,user-scalable=yes,initial-scale=1.0, maximum-scale=2.0"/>
最も重要な値は、user-scalable = yesであり、ズームを可能にするには1.0より大きくなければならないため、最大スケールでもあります。
ビューポートの詳細については、 https: //developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tagをご覧ください。
スワイプイベントの場合、スワイプレフトイベントとスワイプライトイベントをjQuery Mobileの.on()関数にバインドできます。
コードの例を次に示します。
$('#yourElement').on('swipeleft swiperight', function (event) {
//swiped to the left
if (event.type == "swipeleft") {
//do something
}
//swiped to the right
if (event.type == "swiperight") {
//do something
}
});
jQuery Mobileイベントの詳細については、このリンク(または基本的に同じであるため上記のリンクm_gol)を確認できます。
http://jquerymobile.com/demos/1.1.1/docs/api/events.html
上記の両方のコードセットを使用すると、スワイプイベントを検出したり、ピンチしてページをズームしたりできます。