JS でデバイス判別（モバイル/タブレット/PC）
閲覧者の端末がモバイルかタブレットか PC かを、JavaScript で判別する関数です。画面幅の window.innerWidth 、ブラウザの自己申告である navigator.userAgent 、そしてタッチ点数を表す navigator.maxTouchPoints の3つを組み合わせて精度を高めてい…
解説
閲覧者の端末がモバイルかタブレットか PC かを、JavaScript で判別する関数です。画面幅の window.innerWidth、ブラウザの自己申告である navigator.userAgent、そしてタッチ点数を表す navigator.maxTouchPoints の3つを組み合わせて精度を高めています。特に近年の iPad は UA 上で Mac を名乗るため、Mac かつタッチ対応という条件で iPadOS を別途見分けている点が実用的な工夫です。
役立つ場面
- 端末に応じて操作ヒント（クリックかタップか）の文言を切り替えたいとき
- モバイルだけに電話発信ボタンを出すなど、条件付きで UI を変えたいとき
判定の境目はタブレット判定の幅（例では600から1024）を変えて調整できます。重要な注意点として、UA はあくまで自己申告で詐称や将来の変更がありえます。そのため、レイアウトそのものはこの判別に頼らず CSS のメディアクエリで組み、この関数は補助的な分岐に使うのが安全です。判別結果でコンテンツを隠す設計にすると、検索エンジンや想定外の端末で意図せぬ表示になる恐れがある点にも気をつけてください。
使用例・適したシーン
- コードブロック
- 電話番号・住所コピー
- クーポンコードの配布
よくある質問
なぜ画面幅だけで判定しないのですか？
画面幅だけでは、ウィンドウを小さくした PC とスマホを区別できないためです。この関数はタッチ点数や UA も合わせて見ることで、特に Mac を名乗る iPad などを取り違えにくくしています。
レイアウトの切り替えにこの判定を使ってよいですか？
基本のレイアウトは CSS のメディアクエリで組むのがおすすめです。UA は自己申告で確実ではないため、この判定は文言や小さな分岐などの補助に使い、土台はメディアクエリに任せると安全です。