iphone,ipad,android用のHTML5アプリを開発していて、androidのタッチイベントの挙動が(mobile safariと比べて)おかしいなと思うことがあります。w3c Touch Eventsでの策定でも、細かなところまでは決められないだろうし、守られるものでもないだろうとは思うが、出来る限り統一されることを望みます。
W3C Touch Events version 2
機種・バージョンの差異に加えて、様々なブラウザが登場しているので、ネイティブアプリにせよ、HTML5アプリにせよ、ますます開発と試験が混沌としてきたと感じます。
touchmoveイベント
手元のSonyTableS(android4.0.3)では、コンテンツをscalableに設定した場合、touchmoveイベントが取得できません。viewportにてuser-scalable=noとすると正しく取得できるようになります。
<meta name="viewport" content="user-scalable=no">
noにしなくても、touchmoveイベントを捕捉したら、preventDefault()を呼び出してやると正しく処理できます。そのかわりにピンチイン・アウトによるコンテンツの縮小・拡大ができなくなります。
content.addEventListener('touchmove', function(event) { event.preventDefault(); // user-scalableに関係なく、touchmoveをpreventすると、ただしくイベントを扱える。ただし、scalableは無効となる。 touches = event.touches; });
ブラウザとHTML5アプリとで、イベントの競合が起こっているというか、ブラウザによりイベント通知の仕様が異なっているのでしょう。
ピンチができないとスマートフォンじゃない
じゃあ、scalableにしなければいいのでは?と思いますが、一般の人にとっては、このピンチによる縮小・拡大こそ、スマートデバイスだと感じている人が多いため、この機能を諦めることがなかなか認められないこともあります。スワイプ・フリックも同様ですが、これらの機能こそスマートデバイスたらしめるということでしょうか。
多くのHTML5アプリでも、スワイプ・フリックは可能でも、ピンチはだめというのが多いように思います。
しかし、mobile safariでは、scalableであっても、ただしくイベントを捕捉し、処理できるのです。だから、よけいに悩ましいのです。iphone,ipadならできてるじゃないかと言われてしまいます。mobile safariではかなりきっちり扱えるという印象です。
スマートフォンHTML5追従型広告
最近、スマートフォンHTML5コンテンツで追従型の広告を見ることあります(スクロールしようがピンチしようがついてくる広告)。ネイティブアプリではめずらしくありませんが、HTML5でも見たことがあります。
最初見たときに、ピンチにも追従するので、どうやってこれを実装しているんだろうと興味を持ちました。
しかし、それはiphone,ipadのmobile safariでしか、今のところ見たことがありません。おそらく、その原因は、このタッチイベントあたりの理由なんだろうなと思います。
私だったら、最初から実装を諦めたかもしれないですが、広告は表示することが一番の目的ですから、あきらめずに試行錯誤されたんだろうと思います。脱帽です。