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