レスポンシブサイトでPCとiPadの処理を分けたい時のユーザーエージェントの書き方

カテゴリー︎： 【iPhone (iOS)】・【JavaScript】

レスポンシブサイトをつくっていて

ユーザーエージェントの判別で

PC と iPad が同じとみなされてしまった時のメモ

【結論】
「’ontouchend’ in document 」を記述することで解決した

「’ontouchend’ in document」 とは

タッチ可能なディバイスでは初期値としてnullが入っており判別が可能で

タッチができないディバイスには定義自体がないので判別ができない

この性質を利用して下記のように 「iPad」 と 「PC」 の判別ができる

if ('ontouchend' in document) {
    // iPad (タッチ可能ディバイス)

} else {
    // PC (タッチができないディバイス)
}

※ ChromeやSafariブラウザのレスポンシブ用のエミュレータで確認するよりもスマホ実機、iPadの実機での動作検証の方が確実です

試したことをまとめると

スマホ、タブレット
と
PC
を
判別して、違う処理をしたが
PC判別　に　iPadが含まれてしまうので
「’ontouchend’ in document 」をユーザーエージェントに追記してみたが
うまくいかない。。。

しかし試行錯誤を繰り返した結果、下記のコードでうまくいった！

ユーザーエージェントで判別してから入れ子 if 「’ontouchend’ in document」 で判別してみた
↓

if ((navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('Android') > 0) || navigator.userAgent.indexOf('macintosh') > -1 && 'ontouchend' in document) {

  // スマホとタブレットの処理 (ユーザーエージェントで判別)

  if ('ontouchend' in document) {

    // iPadの処理 (タッチ可能ディバイス)

  } else {

    // PCの処理 (タッチができないディバイス)

  }

}

ここにたどり着くまで時間がかかりましたが
お試しください〜

PAGE TOP