このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなくて損したPC情報とかを分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

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

このエントリーをはてなブックマークに追加
イメージ


こんにちは、さち です。

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

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

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




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

スマホは、ダブルタップ に対応するために
シングルタップが有効になるまで
あえて 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を含む投稿はできません。必要な場合は最初のhを削って下さい。
  • 記事に直接関係ない個人のトラブルにはお答えできません。
  • Android は使用経験がないので質問を頂いても答えられません。
  • その他詳細はこちら





記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

2008-2019 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

ブログパーツ