2021年現在、新規でWebサイトを作成する際はレスポンシブ対応するのがほとんどかと思います。
そんな時PCだけまたはスマホだけでjavascript(jQuery)の読み込みを行いたい時があるかと思います。
実はファイルに何行か追記するだけで簡単に切り分けができます。エラー回避やサイト軽量化のためにもやってみましょう。
①画面サイズで切り分ける方法
|
1 2 3 4 5 6 7 |
$(function () { if (window.matchMedia('(max-width: 768px)').matches) { //ここにスマホ・タブレットの時のjs } else { //ここにPCの時のjs } }) |
画面サイズで切り分ける際はこのように記述します。cssのメディアクエリと同じようにmax-width: 〇〇pxのように切り分けます。
②端末（UA）で切り分ける方法
|
1 2 3 4 5 6 7 8 9 10 |
$(function () { 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の時の表示 } }) |
このように端末（UA）で切り分ける方法もあります。例えばスマホ・タブレットは同じでいいというときはスマホの設定のところに『||』でつなげればOKです。
ただタブレットの時は横の時はPC表示になったり縦表示の時はスマホと同じ表示になったり…ということが作りの関係上起こりえます。
なので『①画面サイズで切り分ける方法』の方が無難かもしれません。
