携帯デバイスを判別する

画面サイズで判別
入力系統で判別する
キーボード検出

画面サイズで判別

CSS等で横幅サイズを指定、または横幅より縦幅が狭いものをスマホ等のデバイスを判定する。
最近は解像度もPCディスプレイの解像度に近づいている＆横画面にされると判別できなくなるのであまり当てにできない。

@media (max-width:768px) {
    #pcControls {
        display: none;
    }

    #mobileControls {
        display: flex;
    }
}

@media (max-width:768px) {

#pcControls {

display: none;

}

#mobileControls {

display: flex;

}

入力系統で判別する

タッチ操作があるか
マウスがあるか
ホバー（カーソルを乗せる）があるか
キーボードがあるか

を組み合わせてUIを変えるのが主流です。

① タッチ対応か判定

最も簡単なのはこれです。

const isTouchDevice =
    'ontouchstart' in window ||
    navigator.maxTouchPoints > 0;

console.log(isTouchDevice);

const isTouchDevice =

'ontouchstart' in window ||

navigator.maxTouchPoints > 0;

console.log(isTouchDevice);

判定例

デバイス	結果
iPhone	true
Android	true
iPad	true
Surface タブレット	true
普通のPC	false

ただし最近のノートPCはタッチ対応もあります。

そのため

if (isTouchDevice) {
    // スマホUI
}

だけだと少し危険です。

② ホバー可能か判定

CSSでもJSでも判定できます。

const canHover =
    window.matchMedia('(hover: hover)').matches;const canHover =
    window.matchMedia('(hover: hover)').matches;

const canHover =

window.matchMedia('(hover: hover)').matches;const canHover =

window.matchMedia('(hover: hover)').matches;

デバイス	結果
スマホ	false
iPad	false
マウス付きPC	true

ゲームの場合はこちらの方が便利です。

if (canHover) {
    // PC向けUI
} else {
    // タッチ向けUI
}

if (canHover) {

// PC向けUI

} else {

// タッチ向けUI

}

③ ポインター精度判定

const finePointer =
    window.matchMedia('(pointer: fine)').matches;

1 2	const finePointer = window.matchMedia('(pointer: fine)').matches;

結果

デバイス	結果
マウス	true
指タッチ	false

例えば

const isMobileLike =
    window.matchMedia('(pointer: coarse)').matches;

これは

スマホ
タブレット

をほぼ検出できます。

④ Canvasゲームなら

const hasTouch =
    navigator.maxTouchPoints > 0;

const hasMouse =
    window.matchMedia('(pointer: fine)').matches;

const canHover =
    window.matchMedia('(hover: hover)').matches;

if (hasMouse && canHover) {
    // PC向け
}
else if (hasTouch) {
    // タッチ向け
}

const hasTouch =

navigator.maxTouchPoints > 0;

const hasMouse =

window.matchMedia('(pointer: fine)').matches;

const canHover =

window.matchMedia('(hover: hover)').matches;

if (hasMouse && canHover) {

// PC向け

}

else if (hasTouch) {

// タッチ向け

}

⑤ iPadとPCを区別したい場合

昔はUserAgentを見ていましたが、

最近のiPadはSafariがPCモードを名乗るため面倒です。

例えば

const isIPad =
    navigator.maxTouchPoints > 1 &&
    /Macintosh/.test(navigator.userAgent);

みたいな裏技がありますが、

将来的に壊れる可能性があります。

Canvasゲームならどうする？

実は

「iPadかPCか」

を判定する必要はほぼありません。

代わりに

const useTouchUI =
    navigator.maxTouchPoints > 0;

として、

仮想十字キー表示
仮想ボタン表示
ドラッグ操作

を有効化。

const useMouseUI =
    window.matchMedia('(pointer: fine)').matches;

なら

マウス操作
ホイール操作
ホバー表示

を有効化。

こうすると

iPhone
Android
iPad
Surface
Mac
Windows
Linux

全部に対応しやすくなります。

キーボード検出

「キーボードが接続されているか」を確実に検出するAPIはブラウザにはありません。

これはプライバシーやセキュリティ上の理由です。

1. キー入力があったら判定する

一番現実的なのはこれです。

let keyboardUsed = false;

window.addEventListener('keydown', () => {
    keyboardUsed = true;
});

ユーザーが一度でもキーを押せば

console.log(keyboardUsed);

が true になります。

2. マウス・タッチ・キーボードを自動判定

ゲームではこれが便利です。

let lastInput = 'unknown';

window.addEventListener('keydown', () => {
    lastInput = 'keyboard';
});

window.addEventListener('mousemove', () => {
    lastInput = 'mouse';
});

window.addEventListener('touchstart', () => {
    lastInput = 'touch';
});

let lastInput = 'unknown';

window.addEventListener('keydown', () => {

lastInput = 'keyboard';

});

window.addEventListener('mousemove', () => {

lastInput = 'mouse';

});

window.addEventListener('touchstart', () => {

lastInput = 'touch';

});

例えば

if (lastInput === 'keyboard') {
    // キーボード操作UI
}

のようにできます。

最近のゲーム機のUI切り替えと同じ考え方ですね。

3. Gamepadも検出できる

ブラウザはゲームパッドも対応しています。

window.addEventListener('gamepadconnected', (event) => {
    console.log('接続:', event.gamepad.id);
});

例えば

Xboxコントローラー
PS5コントローラー
Switch Proコントローラー

などが検出できます。

4. 実際のCanvasゲームなら

const inputManager = {
    mode: 'touch'
};

window.addEventListener('keydown', () => {
    inputManager.mode = 'keyboard';
});

window.addEventListener('mousemove', () => {
    inputManager.mode = 'mouse';
});

window.addEventListener('touchstart', () => {
    inputManager.mode = 'touch';
});

window.addEventListener('gamepadconnected', () => {
    inputManager.mode = 'gamepad';
});

const inputManager = {

mode: 'touch'

};

window.addEventListener('keydown', () => {

inputManager.mode = 'keyboard';

});

window.addEventListener('mousemove', () => {

inputManager.mode = 'mouse';

});

window.addEventListener('touchstart', () => {

inputManager.mode = 'touch';

});

window.addEventListener('gamepadconnected', () => {

inputManager.mode = 'gamepad';

});

操作したもの	mode
画面タッチ	touch
マウス移動	mouse
キーボード入力	keyboard
コントローラー	gamepad