iPadでのユーザーエージェント判定での注意

iOS13以降のiPadだとユーザーエージェントが違うということを知ったのでそのメモです。

今までのスマホとタブレットでのユーザーエージェント判定
iOS13以降のiPadでは基本使えない
タッチデバイス判定を追加
1. 関連記事:

今までのスマホとタブレットでのユーザーエージェント判定

今まではスマホとタブレットを判定するときは以下を使っていました。

if(navigator.userAgent.indexOf('iPhone') > 0 ||
   navigator.userAgent.indexOf('iPod') > 0 ||
   (navigator.userAgent.indexOf('Android') > 0 &&
    navigator.userAgent.indexOf('Mobile') > 0)){
   スマホ用の処理
}else if (navigator.userAgent.indexOf('iPad') > 0 ||
          navigator.userAgent.indexOf('Android') > 0){
　タブレット用の処理
}

iPhone/iPod/iPadはそのままの文字列があるのでその文字を判定。AndroidはMobileという文字列で判定です。

iOS13以降のiPadでは基本使えない

iOS13以降のiPadでは上記の記述ではiPadはすり抜けてしまいます。なぜなのかと調べたら以下の記事を見つけました。

iOS13とiPadOSに備える（フロントエンド） - Qiita

もうじきiOS13、iPadOSが一般公開されますね。みなさんは自身のサービスで動作確認済ませてますか？この記事では自分が観測した要注意事象と、それに対する対処を紹介します。※ iOS13 b…

iOS13のSafariには「デスクトップ用WEBサイトを表示」というオプション機能が追加されており、iPadOSはそれがデフォルトでONになっているとのことです。

この「デスクトップ用WEBサイトを表示」がONになっていると普通のデスクトップMacと同じユーザーエージェントが表示されるためすり抜けてました。

タッチデバイス判定を追加

解決策としては上記のサイトに書いてありますが、タッチデバイス判定を追加すればよいとのことだったので追加しました。

if(navigator.userAgent.indexOf('iPhone') > 0 ||
   navigator.userAgent.indexOf('iPod') > 0 ||
   (navigator.userAgent.indexOf('Android') > 0 &&
   navigator.userAgent.indexOf('Mobile') > 0)){
　スマホ用の処理
}else if (navigator.userAgent.indexOf('iPad') > 0 ||
         navigator.userAgent.indexOf('Android') > 0){
 タブレット用の処理
}else if (navigator.userAgent.indexOf('Safari') > 0 &&
         navigator.userAgent.indexOf('Chrome') == -1 &&
         typeof document.ontouchstart !== 'undefined') {
　iOS13以降のiPad用の処理
}

iOS13以降のiPad用の処理のところには一応Chromeを弾いています。

これでiOS13以降のiPadで動きました。

今までのスマホとタブレットでのユーザーエージェント判定

iOS13以降のiPadでは基本使えない

タッチデバイス判定を追加

関連記事:

コメント