その他

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では難しいという時もあるので、ぜひご活用ください!

この記事をシェアする

関連記事

  • 2024.03.22

    Webデザインにおけるアニメーションについて考えてみた〜実例編〜

    その他

  • 2024.03.12

    Webデザインにおけるアニメーションについて考えてみた〜メリット・デメリット編〜

    その他

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    その他

おすすめ記事

  • 2023.12.07

    アニメーションはデザイナーが作る?

    その他

  • 2021.03.07

    【勝手にWEBサイトレビュー #16】イラストとペイントの融合がかわいいロシアのパートナーシッププログラム紹介サイ……

    その他

  • 2023.12.29

    記事タイトルを行数で制御するCSS

    その他

TAG

×