jQueryでユーザーエージェント判定をして、レスポンシブ対応をする
cssはメディアクエリでレスポンシブ対応が可能ですが、jQueryでも必要な場合があります。
そんな時の一つの方法として【ユーザーエージェント判定】と言うものがあります。
簡単に言うと、ユーザーが閲覧してる環境が、PCかタブレットかスマホかの判別をして、それに合わせた処理をするというもの。
下記のコードをコピペして使用して下さい。
|
1 2 3 4 5 6 7 8 |
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
- タブレット
- スマホ
で十分かと思います。参考にどうぞ。