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

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

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

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • Windows:ウィンドウを効率よく操作する方法まとめ (12/09)
  • Windows:スリープ復帰時のパスワード入力をやめる (12/07)
  • Windows:ミス激減!チェックボックスでファイルを複数選択する (12/05)
  • Amazon:スマホでPC版サイトを開いたらスマホ版に戻れなくなった (12/02)
  • Windows:アプリの音量が勝手に変更される (11/30)
  • 管理人より
    2000万アクセス突破しました。ありがとうございます。

    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









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




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • Yahoo!BBはスパムコメントが多いため一部規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使ったことがないので質問を頂いても答えられません。
    • その他詳細はこちら





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

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

    ブログパーツ