こんにちは！今日はユーザーエージェントで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'って書いといてくれ