[jQuery]デバイス幅(PC・スマホ)で条件分岐する方法【簡単】

デバイス幅(PC・スマホ)によって表示・動作を切り替えたい!

上記の悩みに回答します。

本記事ではjQueryを使いデバイス幅によって条件分岐する方法を紹介します。

※jQueryを使うので事前にダウンロードかCDNをソース内で読み込んで置いてください。

以下ソースをscript内にコピペしよう

上記ソースをscript内にコピペしましょう!

横幅が1000px以上か、以下で条件分岐させてます。

var devWの値を変えることで分岐させたいpx数を好きに指定できます。スマホのデバイス横幅を調べてpxを変えて見ましょう。else ifを使ってタブレット時の条件分岐を加えるのも有りです。

上記ソース内のコメントアウト部分に、切り替えたい表示・動作のソースを記述すれば完成!

以上で悩みは解決できたかと思います!

解説を終わります!

Ads

関連記事

WordPress プログラミング

【wordpress】先頭固定記事かどうかを判別して条件分岐する方法

2021.10.26
15
JavaScript プログラミング

【簡単】jQueryのDatepickerに時間設定を追加したDatetimepickerを導入する方法

2022.03.10
535
JavaScript プログラミング

左右に見え隠れするスライダーを高さ固定で実装する方法【swiperを使用】

2020.07.14
289
HTMLCSS プログラミング

flexbox(フレックスボックス)で横並びにした要素の線の重なりを無くす方法

2021.03.02
355