iPad SafariのuserAgentはiPadでないことに気づいていない人が多い

iPad SafariのuserAgent

iPad SafariのユーザーエージェントにはiPadが含まれている。

そのように考えてJavaScriptを書いている人が多いが、現在のiPad Safari (iPadOS 14以降)のuserAgentにiPadの文字列は含まれていない。

実際にiPadでユーザーエージェントを確認すると以下のようになる。

iPad Chromeの場合

Mozilla/5.0 (iPad; CPU OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/85.0.4183.109 Mobile/15E148 Safari/604.1

iPad Safariの場合

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Safari/605.1.15

ユーザーエージェントを確認できるページ

ご覧の通りChromeのほうにはユーザーエージェントにiPadが含まれているが、SafariだとユーザーエージェントにiPadが含まれていない。

そのため、JavaScriptなどでよくあるAndroidとiOSとiPadOSの場合のみに処理する以下のような条件分岐はiPadのSafariだと適用されない。

const ua = navigator.userAgent.toLowerCase()
const r = document.getElementById('r')
if (/android|ipod|ipad|iphone/.test(ua)) {
  r.textContent = 'AndroidまたはiOSまたはiPadOSです。'
} else {
  r.textContent = 'AndroidまたはiOSまたはiPadOSではありません！'
}

判定確認用サンプル1

iPad Safariも判定に含める方法

iPad Safariを判定に含めるにはmacintoshと'ontouchend' in documentをifの条件に加えれば判定できる。

const ua = navigator.userAgent.toLowerCase()
const r = document.getElementById('r')
if (/android|ipod|ipad|iphone|macintosh/.test(ua) && 'ontouchend' in document) {
  r.textContent = 'AndroidまたはiOSまたはiPadOSです。'
} else {
  r.textContent = 'AndroidまたはiOSまたはiPadOSではありません！'
}

判定確認用サンプル2