jQueryでユーザーの判定を行う

プログラミングの勉強日記

2020年7月4日　Progate Lv.148
ポートフォリオ作成中

レスポンシブデザイン

　こちらの記事でレスポンシブデザインについて詳しく書かれている。メディアクエリ(ブラウザの画面サイズによってCSSのスタイルを設定できる手段)を用いて、画面のレイアウトを防ぐことができる。
　今回はブラウザの画面幅ではなく、jQueryを用いてユーザーの端末情報を判定することで、レイアウト崩れを防ぐ方法を紹介する。

ユーザーエージェント判定

　サイトのアクセスするときに、スマートフォンとパソコンで処理を切り替えるときに使う。

JSファイル

$(function () {
    var ua = navigator.userAgent;
    if ((ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0) && ua.indexOf('Mobile') > 0) {
        // スマートフォン用処理
    } else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
        // タブレット用処理
    } else {
        // PC用処理
    }
})

参考文献