スポンサーリンク

jQuery Mobile:スマホのシングルタップの反応が遅すぎる件

この記事は約3分で読めます。

イメージ

こんにちは、さち です。

先日、スクフェス イベント見積もり を作っていた時
ラブカストーン数を調整するボタンの反応が遅いという
困った事態に遭遇しました。

連続で押すボタンでなければ大きな問題ではないんですが
「数値」を調整するボタンなので
連打をする人がいる可能性は高い…。

ということで、解決法を調べてみました。

スポンサーリンク

タップの反応が遅いのはわざと

スマホは、ダブルタップ に対応するために
シングルタップが有効になるまで
あえて 300ミリ秒(=0.3秒) の遅延を持たせているそうな。

0.3秒 なんて一見すごく短い時間に思えますが
実際に操作してみると誰もが反応の悪さに気付くレベル。
連続で押すようなボタンではさらに目立ちます。

<meta name="viewport">
「user-scalable=no」 や 画面の拡大禁止 を行うと
シングルタップの反応速度を上げられますが
この方法は Chrome と Firefox にしか効果がないようです。
(iPhone の Safari,Android の ブラウザ は遅いまま)

他の方法はないかとネット検索をしていると
「fastClick」という jQuery プラグインを発見。
早速、導入します!

前準備

  1. GitHub から「jQuery fastClick plugin」をダウンロード。
    操作画面
  2. zipファイルを解凍すると「jQuery.fastClick.js」ができます。
    サーバにアップロードしましょう。
    操作画面
  3. 「jQuery fastClick plugin」は名前のとおり jQuery のプラグインです。
    読み込みの記述は必ず jQuery より後にします

    <html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <script src="jquery-1.11.2.min.js"></script>
        <script src="jquery.mobile-1.4.5.min.js"></script>
        <script src="jQuery.fastClick.js"></script>

連続でボタンを押すことが想定される場合は
ダブルタップと認識され画面がズームする恐れがあるため
<meta name="viewport">
「user-scalable=no」を書いた方がよいかもしれません。

使い方

イベントで、「click」の代わりに「fastClick」を使うだけ。超簡単!
スマホ はもちろん、PC のクリックでもちゃんと動きます。

$('button').fastClick(function() {
  alert('clicked!');
});

「touchstart」「touchend」のイベントを使って
遅延のないシングルタップを自力実装する方法もありますが
jQuery を使っているならこの方法が楽で簡単ですね。

→ dave1010 / jquery-fast-click - GitHub

【参考サイト】

→ Chrome Developer Teamから学ぶサイトパフォーマンス - ROCHAS

コメント

タイトルとURLをコピーしました