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

0

関連記事

  • 2021.07.20

    画面遷移時にページ全体をフェードさせる方法

    CSS

    JavaScript

  • 2021.05.24

    【おすすめ書籍】動くデザインを作る時にまず読んでほしい本

    JavaScript

  • 2021.04.06

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

    JavaScript

おすすめ記事

  • 2021.06.30

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

    CSS

  • 2021.05.24

    【おすすめ書籍】動くデザインを作る時にまず読んでほしい本

    JavaScript

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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