Written by Kasumi

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

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

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

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

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

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

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

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

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

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

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

解説を終わります!

目次

関連記事

HTMLCSS jQuery

【簡単CSS・jQuery】左から右に流れるようなテキストアニメーションを実装する方法

更新日:2022.09.09
6866
jQuery

【簡単】datapickerに日本の祝日を自動で登録し、選択不可にする方法【jQuery】

更新日:2022.09.09
4937
jQuery

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

更新日:2022.09.09
9647
jQuery

【日本語対応】Datepickerを使って予約フォームにカレンダー式日付選択を入れる方法【jQuery】

更新日:2022.09.09
2944