jQueryでユーザーエージェント判定をして、レスポンシブ対応をする
cssはメディアクエリでレスポンシブ対応が可能ですが、jQueryでも必要な場合があります。
そんな時の一つの方法として【ユーザーエージェント判定】と言うものがあります。
簡単に言うと、ユーザーが閲覧してる環境が、PCかタブレットかスマホかの判別をして、それに合わせた処理をするというもの。
下記のコードをコピペして使用して下さい。
var ua = navigator.userAgent;
if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
//スマホの場合の処理
} else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
//タブレットの場合の処理
} else {
//PCの場合の処理
}
もっと細かい設定をすることも可能ですが、ひとまずはこの
- PC
- タブレット
- スマホ
で十分かと思います。参考にどうぞ。