制作ブログ Web制作マークアップJavaScriptスマホでイベントをちゃんと認識するか確認

スマホでイベントをちゃんと認識するか確認

端末によって画面両サイドのエリアのリンクが認識しづらい現象が発覚。
クリッカブル領域を広げてみたが改善されなかった。

そこでサンプルページを用意し、スマホで調査した。

調査URL・QR
https://sample.simplesimples.com/eventtouch/
QR

調査内容は二つ。

  1. 同ビジュアルで異なるクリッカブル領域
  2. クリッカブル領域を明示

その結果のでメモ。

ビジュアルデザインの重要さ

クリッカブル領域を明示することで改善できた。

ビジュアルデザイン上をタップしようとするので、暗示的にクリッカブル領域を広げただけでは、デザインがクリッカブル領域の端にある場合は効果は激減(ほぼ不能)してしまう。

補足:端末特性

iPhone 4S(iOS 6.1.3)
GALAXY SII(SC-02C Android 2.3.5)
htc(ISW12HT Android 2.3.4)
連打した場合は、最後のクリックのみを実行してくれる。
そのためか、touchendよりclickのほうが体感レベルで処理開始のタイミングが遅いときが多い。
連打は奇数の場合のみclickイベント発動(偶数はダブルタップということか)。
GALAXY SII(SC-02C Android 2.3.5)
htc(ISW12HT Android 2.3.4)
XPERIA(SO-03D Android 4.0.4)
LG(L-06D Android 4.0.4)
クリッカブル領域の画面内側の境目をタップすると、クリックイベントのみ反応が頻出する。
クリッカブル領域の画面外側の境目をタップすると、クリックイベントが無視され、タッチイベントのみ反応がある。
XPERIA(SO-03D Android 4.0.4)
LG(L-06D Android 4.0.4)
ダブルタップもクリックイベント2回発動。
XPERIA(SO-03D Android 4.0.4)
横幅40px未満は反応ほぼなし
横幅44px以上推奨

補足:これらを踏まえた端末特性まとめ(推測)

iPhone 4S(iOS 6.1.3)
Android 2.x
連打した場合は、連打した回数が奇数の場合、最後のクリックのみを実行してくれる(偶数はダブルタップということか)。
Android
クリッカブル領域の画面内側の境目をタップすると、クリックイベントのみ反応が頻出する。
クリッカブル領域の画面外側の境目をタップすると、クリックイベントが無視され、タッチイベントのみ反応がある。
Android 4.x
ダブルタップもクリックイベント2回発動。