JavaScript

2021.02.09

【jQuery】jQueyでスマホ・PC判定をする

「スマホの時だけハンバーガーメニューを表示したい」、「スマホとPCでスクロール途中で表示されるコンテンツなどの表示位置を調整したい」など、動きをスマホとPCで使い分けたり、調整したい時があります。

頑張ればCSSだけでなんとかできることが多いですが、jQueryでスマホ・PCを判定する方法はとても簡単なので覚えておくと便利です。

jqueryでスマホ・PC判定するコード

以下コードをご覧ください。

See the Pen
jquery-responsive
by spiqa design (@spiqa_design)
on CodePen.

見ての通り、コメントで「// スマートフォン用の記述」という箇所にスマートフォン用の記述を書き、他タブレット用の記述、PC用の記述を書くことで使い分けることができます。

上記のコードでは、以下のようにテキストの色を各端末ごとに表示を変えています。

・スマートフォン→テキストを緑色で表示
・タブレット→テキストを青色で表示
・PC→テキストを赤色で表示

PCやスマホでテキストの色が変わっているか確認してみてください。

まとめ

上記コードを使い回せば、あらゆる動きを端末ごとに調整できるのでとても便利です。

動きを端末ごとに調整する場合、どうしてもCSSでは難しいという時もあるので、ぜひご活用ください!

この記事をシェアする

関連記事

  • 2021.04.06

    【jQuery】全画面表示のナビゲーションメニューを実装する

    JavaScript

  • 2021.04.05

    【簡単レスポンシブ対応】jQueryのみでPC/SP(スマートフォン)の画像を切り替える方法

    JavaScript

  • 2021.03.30

    【jQuery】text()メソッドでHTML要素内のテキストを操作する

    HTML5

    JavaScript

おすすめ記事

  • 2022.05.31

    超簡単!GoogleMapの色をサイトにあわせて変える方法

    コーディング

    制作

  • 2022.04.28

    【カメラ初心者向け】物撮りが上手くなるコツ ~食べ物編~

    その他

    制作

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

×