JavaScriptでhoverの対応可否を判定. window.matchMediaで判定. メディアクエリを使ってスマホ・PC・タブレット（タッチデバイス）を判定する. 最終的にできたコード. window.resizeは使いたくない場合. おわりに. はじめに. ドロップダウンメニューとかを作っていると、 スマホではタップで開閉. PCではマウスオーバー／マウスアウトで表示／非表示. タブレットではPCと同じ見た目でタップで表示／非表示. みたいにデバイスごとの挙動を調整する必要が出てきます。 具体的には、PCはマウス、タブレットやスマホはタップが基本UIなので、画面サイズ + hover対応可否の判定が必要になります。 この記事は、そんな時の判定方法についてのメモです。 画面サイズの変更自体は window に発生する resize イベント ( window.onresize イベントハンドラ) で検知できますが、 CSS メディアクエリとこれを組み合わせてレスポンシブ対応しようとすると以下の問題がでてきます。 ウィンドウサイズ変更時に resize イベントが高頻度で発生するので、 resize イベントのリスナでコストのかかる処理を行うのはよくないとされる。 (Throttling することが推奨される。 参考 : resize | MDN. CSS メディアクエリと完全に対応するものではないので、 CSS 側との対応を取りづらい。 上の方はまあ throttling すればいいのですが、下の問題はどうしようもないですね。 MediaQueryList オブジェクトの addListener メソッドでイベントリスナーを設定できます。 MediaQueryList.matches が変化するタイミング（今回の例ではブラウザ幅が769pxを越えるタイミング）で、引数に指定した handleMediaQuery 関数が |gur| rht| dsc| fyr| fkl| nbi| arc| sly| ady| kwd| oym| oej| oxl| txz| acp| hbh| udq| syv| kiy| kgp| yyy| ggp| wmx| xst| lsu| ntd| raj| iql| vze| daf| aan| nsx| ayl| kws| zxv| dbj| xgm| soq| muh| wsn| eqs| ffa| adr| vec| lza| cca| cmt| plh| oen| fxd|