タッチデバイスかどうかを判定する

単にスマホかPCかっていう話なら PHP で書けばいいこの記事 の内容で事足りるのですが、iOS13 以降の iPad の User-Agent に iPad ではなく Macintosh が入ってるので、それらもろもろの判定を取るとなると、タッチが取れるかどうかのを調べる必要があるので、JavaScript でやることになります。

document.ontouchstart を使う

typeof document.ontouchstart !== 'undefined'

以下、判定をとって CSS クラスの差し替えを行うサンプルを示します。

タッチデバイスかどうかだけで判定

// 変数定義
var ua = window.navigator.userAgent;
var devType = "pc";

if (
	// モバイル端末かどうか調べる
	ua.indexOf('iPhone') > 0 ||
	ua.indexOf('iPod') > 0 ||
	(ua.indexOf('Android') > 0 &&
	ua.indexOf('Mobile') > 0) ||
	ua.indexOf('iPad') > 0 ||
	ua.indexOf('Android') > 0 ||
	// タッチデバイスか調べる(iPad用)
	(ua.indexOf('Safari') > 0 &&
	ua.indexOf('Chrome') == -1 &&
	typeof document.ontouchstart !== 'undefined')
) {
	// タッチデバイス判定
	devType = "touchDevice"
}
// 処理の分岐
if (devType == "pc") {
	// PCでやる処理を書く
} else {
	// タッチデバイスででやる処理を書く
}

デバイスの種類も判定を取る場合

// 変数定義
var ua = window.navigator.userAgent;
var devType;

if (ua.indexOf('iPhone') > 0 ||
ua.indexOf('iPod') > 0 ||
(ua.indexOf('Android') > 0 &&
ua.indexOf('Mobile') > 0)) {

	devType = "sp";	// スマートフォン判定

} else if (ua.indexOf('iPad') > 0 ||
ua.indexOf('Android') > 0) {

	devType = "tab"	// タブレット判定

} else if (ua.indexOf('Safari') > 0 &&
ua.indexOf('Chrome') == -1 &&
typeof document.ontouchstart !== 'undefined') {

	devType = "ipad"	// iPad判定

} else {
	devType = "pc"	// PC判定
}

// 処理の分岐
if (devType == "sp") {
	// スマートフォンでやる処理を書く
} elseif (devType == "tab") {
	// タブレットでやる処理を書く
} elseif (devType == "ipad") {
	// iPadでやる処理を書く
} else {
	// PCでやる処理を書く
}

用途に応じて使い分けるといいです。

なんでこんなの書くに至ったのか

ナビゲーションの UI を考えていたんですが、PC の場合オンマウスでメニューがスイスイ開いていくほうが「いちいちクリックしなくていい」し、直感的にメニューを選べるメリットがあります。

反面、その UI だとスマホやタブレットだとオンマウスって考え方が存在しないのでメニューが開いていかないから、タッチデバイスではタップしたら開く UI になってないといけないわけですね。

そうなるとPCかモバイルかで処理を分けて hover でやらせるか click でやらせるか決めないといけないんですが、iOS13 以降の iPad では従来のやり方でモバイル端末と判別することができなくなったので、そこを判別する仕組みが必要だったってことです。