こんにちは！今日はユーザーエージェントでiPadか否かを対応する方法についてです。 iPadOS対応版ですよ！

結論

これでOK↓

;/iPad|Macintosh/i.test(navigator.userAgent) && 'ontouchend' in document

簡単な使い方

const isIPad =
  /iPad|Macintosh/i.test(navigator.userAgent) && 'ontouchend' in document

if (isIPad) {
  console.info('iPadからのアクセスです')
} else {
  console.info('iPadからのアクセスじゃないです')
}

解説

まずtestメソッド+正規表現+UserAgentでUserAgentに文字列iPadかMacintoshがあるか調べます。

;/iPad|Macintosh/i.test(navigator.userAgent)

これだとipadOSじゃないiPadとipadOSのiPadはtrueになるけどmacOSもtrueになってしまいます。 そりゃそうだ’Macintosh’って書いてあるし。

なのでタッチ可能かを以下のように判断します。

'ontouchend' in document

ontouchendはタッチスクリーンから指を離した時に発火するやつです。 これはスマホとタブレットに加えタッチスクリーンのPCでもtrueになりますが、 MacはタッチスクリーンのPCじゃないのでfalseになります。 これをさっきのと組み合わせることで**iPadだけtrue(使ってるOSは関係ない)**となるってわけよ。以上。

色々なデザインパターン

PCの時だけfalseにする

前の記事に書いたやつはこんな感じ！ でもこれだとiPadOSのiPadがfalseになっちゃう。

;/iPhone|iPod|iPad|Android/i.test(navigator.userAgent)

なのでこう変える。 これはもっと良い書き方ありそう…

;/iPhone|iPod|iPad|Android/i.test(navigator.userAgent) ||
  (navigator.userAgent.includes('Macintosh') && 'ontouchend' in document)

他にも色々。用途があるかは微妙…↓

iPadOSのiPadだけtrueにする

navigator.userAgent.includes('Macintosh') && 'ontouchend' in document

iPadOSじゃないiPadだけtrueにする

navigator.userAgent.includes('iPad')

macOSだけtrueにする

navigator.userAgent.includes('Macintosh') && !('ontouchend' in document)

タッチできる端末だけtrueにする

'ontouchend' in document

さいごに

iPadOSのUAに’iPadOS’って書いといてくれ