Webページのアクセスに利用されたデバイスがスマホなのかタブレットなのかPCなのかを判定したいという場合はそれぞれ下記のようなコードを記述すればOKです。}})見ていただくとわかる通り、両方とも同じ書き方でOKです。「仕組みをしっかり理解したい」「もっと便利なカスタマイズが知りたい」という方はぜひこのまま続きをお読みください〜目次スマホやタブレットを判定するにはUserAgent(ユーザーエージェント)を確認するとよいスマホなのかタブレットなのかを判定するロジックについて便利なカスタマイズを紹介1変数に格納していつでも呼べるようにする2コード量を少し短縮する注意点などあくまでページ読み込み時のUserAgentを取得している便利そうなプラグインも存在するけどスポンサーリンクスマホやタブレットを判定するにはUserAgent(ユーザーエージェント)を確認するとよいWebページのリクエスト時にサーバー側に送信される情報の中には、利用しているデバイス(PC、スマホなど)によって異なる、UserAgent(ユーザーエージェント)と呼ばれるデータが含まれています。ユーザーエージェントは下記のコードで取得できます。Safari/604.1"というような文字列が入っています。使用しているデバイスがiPhoneならユーザーエージェント文字列の中にiPhoneという文字が含まれますし、AndroidならAndroidという文字が含まれてきます。これを利用すればアクセスしてきたユーザーのデバイスが判別できるというわけです。下記のような取得の仕方を記載しているサイトもありますが、得られる結果はほぼ一緒ですので特に問題ありません。safari/604.1"スポンサーリンクスマホなのかタブレットなのかを判定するロジックについて先ほど書いたとおり、UserAgent文字列に特定の文字列が含まれるかどうかで判定します。特定の文字が含まれている場合は、それが何文字目かを表す数値が特定の文字が含まれていない場合は-1がそれぞれ得られます。-1必ず-1か0以上の数値が返ってきますので、.indexOf()メソッドの結果が-1より大きいかどうかで条件分岐すればOKです。今回はiPhoneかAndroidならスマホという基準にしています。Phoneとかいうのもあるみたいですが、大分レアな存在のようなので。alert('スマートフォンやで');}}Androidの場合は、Mobileという文字列も含まれていないといけないことに注意です。0で比較していたりしますが、厳密にはこれは誤りです。下の例のように、特定の文字が1文字目から出現していた場合には0が返るためです。0という比較は誤りということですね。いえ、現状はこのようにしても不具合が起きるわけではないので、特に気にならない人は気にしなくてもOKです。※現在のUserAgentの規則性ではデバイスを示す文字列が先頭にくることはないためまた、今回は.indexOf()メソッドを使用していますが、.search()メソッドや.matchメソッドを使用してもOKです。コード量も少し減らせるので、正規表現が理解できている場合はおすすめです。スポンサーリンク便利なカスタマイズを紹介1変数に格納していつでも呼べるようにするスマホの場合はAという処理をするタブレットの場合はBという処理をするPCの場合はCという処理をするというコードになった場合に、それぞれの処理が少なければ冒頭で紹介したコードのままで問題ないと思うのですが、それぞれの処理がある程度のボリュームになる場合はコードの見通しが悪くなりがちなので、結果を変数に格納してしまうことを推奨します。具体的には下記のような感じです。PCの処理}こうしておくことで、例えばPCだったら特に処理することがない場合などは早期リターンしてしまえるようになりますね。-1と比較する部分は短縮可能です。alert('スマートフォンやで');}}上記のように記述しても同じ結果になりますので、若干のコード量短縮となります。ちなみに~はビット反転を意味しますが、詳しくは別途ググっていただきたいですw知らない人が見たときに混乱する可能性があるので、基本的には推奨しません。スポンサーリンク注意点など最後に注意すべき点について紹介して終わります。ページ読み込み時のUserAgentを取得している年のための補足程度になりますが、今回のコードはリアルタイムでUserAgentの変化を検知するものではありません。Chromeの検証ツールなどでデバイスを切り替えながら実行すると期待する結果が得られなくなります。ないケースなので考慮しなくていいことがほとんどだとは思いますが、一応CSSのメディアクエリーと組み合わせれば画面サイズの変化をリアルタイムで検知できますので、スマホやタブレットの判定を行うことが可能になります。便利そうなプラグインも存在するけど先人が作ってくれた判定用のプラグインもあるにはあります。UserAgentChecker.jsですが、今回のような判定程度の軽微なロジックであれば自力でコーディングしてしまった方が管理・改修などしやすいですし、なにより成長にも繋がります。インドア生活のすすめ.。