JavaScriptに関するお知らせ

SINCE2019
>
【JS】ユーザーエージェントでiPadを判別(iPadOS対応版)

【JS】ユーザーエージェントでiPadを判別(iPadOS対応版)


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



PREV
2019-09-04
ブログリニューアル

NEXT
2019-09-17
WordPressが嫌でNuxt.js+Contentfulでブログを作ったけどHugoに移行した話-前編