最近のデバイスを調べていたら、UA でデバイスを振り分けるのはもう限界だと分かった。チョット調べてみると、現在では便利な振り分け方法がある事が分かった。
という事で、簡単な覚書を残しておく。
スタイルシートの場合
以下で、body の色が黄色かグレーに変化する
ページ遷移と同時に発生。
- <style type="text/css"><!--
/* マウスなどの精密なポインタの場合 */
@media (pointer: fine) {body{ background-color: yellow; }}
/* タッチパネルなどの大雑把なポインタの場合 */
@media (pointer: coarse) {body{ background-color: #ccc; }}
--></style>
javascript の場合1
以下で、コンソールに結果が表示される。
ページ遷移と同時に発生。
- <script>
if (navigator.maxTouchPoints > 0) {
console.log('タッチパネルのデバイス検出');
}
else {
console.log('マウスのデバイス検出');
};
</script>
javascript の場合2
以下で、コンソールに結果が表示される。
マウスクリックや、デバイスタッチのタイミングでイベント発生。
- <script>
document.addEventListener('pointerdown', (event) => {
if (event.pointerType === 'mouse') {
console.log('マウス操作を検出');
} else if (event.pointerType === 'touch') {
console.log('タッチパネル操作を検出');
} else if (event.pointerType === 'pen') {
console.log('ペン操作を検出');
}
});
</script>
「javascript の場合1」の方法が、色々と応用が出来て便利だねえ。
リスト表示された大量のリンクの隙間を調節するには、「スタイルシートの場合」がお手軽だねえ。
そして以下は、qiita の @momotaro_kawaii さん記述のもの（勝手に転載）
- const userAgent = navigator.userAgent.toLowerCase()
if (/ipad|macintosh/.test(userAgent) && ('ontouchend' in document)) {
console.log('iPadです。')
} else {
console.log('PCです。')
} - 【JavaScript】User-AgentでPCとiPadの判別方法 #JavaScript - Qiita
なるほど、「('ontouchend' in document)」なんてものもあるのか。
このページは以上。