JavaScript

2021.01.08

【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.09.28

    読み込みが終わったら処理!onloadイベントの使い方と注意点について解説【JavaScript】

    JavaScript

  • 2021.09.24

    JavaScriptの勉強におすすめの本7選【初心者〜上級者別に厳選】

    JavaScript

  • 2021.09.10

    JavaScriptの基礎をスピーディーに学べる!初心者におすすめの教本を紹介

    JavaScript

おすすめ記事

  • 2021.06.08

    簡単!蛍光ペンっぽいアンダーラインを引く方法

    CSS

    WordPress

  • 2021.06.30

    【おすすめ書籍】Sassを始めてみるならこの1冊

    CSS

  • 2021.08.11

    初心者必見!最初に読んでおきたいgoogleアナリティクスのおすすめ書籍

    その他

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!