【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じゃない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'って書いといてくれ
PREV
2019-09-04
ブログリニューアル
NEXT
2019-09-17
WordPressが嫌でNuxt.js+Contentfulでブログを作ったけどHugoに移行した話-前編
LINK
リンク
Twitter
GitHub
TAGS
タグ
LATESTS
最新の記事
POPULAR
人気の記事
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介