【初心者向け】JavaScriptでタッチスクリーンデバイスを検出する方法｜2024年最新版
JavaScriptでタッチスクリーンデバイスを検出する方法
ontouchstart プロパティは、タッチイベントが発生したときに呼び出されるイベントハンドラを指定するために使用されます。このプロパティがブラウザでサポートされている場合は、デバイスはタッチスクリーンデバイスであると判断できます。
if ('ontouchstart' in window) {
// タッチスクリーンデバイスである
} else {
// タッチスクリーンデバイスではない
}
maxTouchPoints プロパティは、デバイスが同時にサポートできるタッチポイントの最大数を取得するために使用されます。このプロパティの値が0より大きい場合は、デバイスはタッチスクリーンデバイスであると判断できます。
if (window.maxTouchPoints > 0) {
// タッチスクリーンデバイスである
} else {
// タッチスクリーンデバイスではない
}
matchMedia APIは、メディアクエリの照合結果に基づいてスタイルシートを動的に適用するために使用されます。このAPIを使用して、タッチスクリーンデバイス向けのメディアクエリを作成し、デバイスがそのメディアクエリに一致するかどうかを確認できます。
const query = window.matchMedia('(pointer: coarse)');
if (query.matches) {
// タッチスクリーンデバイスである
} else {
// タッチスクリーンデバイスではない
}
各方法の詳細
ontouchstartプロパティは最も簡単な方法ですが、古いブラウザではサポートされていない場合があります。maxTouchPointsプロパティは比較的新しいプロパティですが、すべてのブラウザでサポートされているわけではありません。matchMediaAPIは最も汎用性の高い方法ですが、他の方法よりも複雑です。
補足
- 上記の方法を組み合わせることで、より確実にタッチスクリーンデバイスを検出することができます。
- タッチスクリーンデバイスかどうかを検出する以外にも、タッチイベントを処理する必要がある場合は、JavaScriptのタッチイベント APIを使用する必要があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タッチスクリーンデバイス検出</title>
</head>
<body>
<script>
// `ontouchstart` プロパティを使用
if ('ontouchstart' in window) {
console.log('タッチスクリーンデバイスです');
} else {
console.log('タッチスクリーンデバイスではありません');
}
// `maxTouchPoints` プロパティを使用
if (window.maxTouchPoints > 0) {
console.log('タッチスクリーンデバイスです');
} else {
console.log('タッチスクリーンデバイスではありません');
}
// `matchMedia` APIを使用
const query = window.matchMedia('(pointer: coarse)');
if (query.matches) {
console.log('タッチスクリーンデバイスです');
} else {
console.log('タッチスクリーンデバイスではありません');
}
</script>
</body>
</html>
このコードを実行すると、ブラウザのコンソールに以下のようなメッセージが表示されます。
タッチスクリーンデバイスです
タッチスクリーンデバイスです
タッチスクリーンデバイスです
応用例
タッチスクリーンデバイスかどうかを検出する方法は、さまざまな場面で応用できます。
- タッチスクリーンデバイス向けのコンテンツを表示したり、非対応デバイスには別のコンテンツを表示したりする
- タッチ操作のみで操作できるUIを作成する
- モバイルアプリ開発
タッチスクリーンデバイスを検出するその他の方法
- navigator.userAgent プロパティを使用する
navigator.userAgent プロパティは、ユーザーエージェント文字列を取得するために使用されます。この文字列には、ブラウザやオペレーティングシステムに関する情報が含まれており、タッチスクリーンデバイスかどうかを判断するために使用できます。
const userAgent = navigator.userAgent;
if (userAgent.match(/Android|iPhone|iPad/)) {
// タッチスクリーンデバイスである
} else {
// タッチスクリーンデバイスではない
}
- window.innerWidth と window.innerHeight プロパティを使用する
window.innerWidth と window.innerHeight プロパティは、ブラウザのウィンドウの幅と高さを取得するために使用されます。これらの値を使用して、デバイスがスマートフォンやタブレットなどのモバイルデバイスかどうかを判断できます。
if (window.innerWidth < 768 && window.innerHeight < 1024) {
// モバイルデバイスである可能性が高い
} else {
// モバイルデバイスではない可能性が高い
}
- window.orientation プロパティを使用する
if (window.orientation !== 0) {
// モバイルデバイスである可能性が高い
} else {
// モバイルデバイスではない可能性が高い
}
注意点
これらの方法は、あくまでも目安として使用してください。確実にタッチスクリーンデバイスかどうかを判断するには、複数の方法を組み合わせて使用することをおすすめします。
JavaScriptでタッチスクリーンデバイスを検出するには、さまざまな方法があります。どの方法を使用するかは、要件とブラウザのサポート状況によって異なります。
javascript jquery touch
