【JavaScript】スマホ判定をする2つの方法 | userAgentと画面幅でスマホ判定

// 1. navigatorオブジェクトのuserAgentプロパティで、デバイス情報を取得することができる。
let userDevice = navigator.userAgent;

console.log({navigator});
console.log({userDevice});

// 2. navigator.userAgent からスマホ判定する関数
function JudgingFromUserAgent() {

    // 3. UserAgentからのスマホ判定 => navigator.userAgent.match(正規表現)
    if (navigator.userAgent.match(/iPhone|Android.+Mobile/)) {
        console.log('スマホです！');
    } else {
        console.log('スマホ以外のデバイスです！');
    }
}

JudgingFromUserAgent();
 // スマホです！

// 1. スマホ・タブレット・PCの判断をする条件分岐のSample
if(userDevice.indexOf('iPhone') > 0 || userDevice.indexOf('iPod') > 0 || userDevice.indexOf('Android') > 0 && userDevice.indexOf('Mobile') > 0){
    console.log('SmartPhon');
}else if(userDevice.indexOf('iPad') > 0 || userDevice.indexOf('Android') > 0){
    console.log('Tablet');
}else{
    console.log('PC');
}

// 1. 画面幅から、スマホサイズとして判定するパターン => スマホサイズの境界を決め打ちする
function JudgingFromScreenWidth() {

    // 2. window.matchMedia()関数を使うことで、デバイス画面幅を判定できる！
    if (window.matchMedia && window.matchMedia('(max-device-width: 640px)').matches) {
        console.log('画面幅から考えて、スマホです！');
    } else {
        console.log('画面幅から考えて、スマホ以外のデバイスです！');
    }
}

JudgingFromScreenWidth();
 // 画面幅から考えて、スマホ以外のデバイスです！

<span id="members-only-title">Members Only Page</span>

<script type="text/javascript">

    const membersOnlyTitle = document.getElementById('members-only-title');

    if (window.matchMedia && window.matchMedia('(max-device-width: 767px)').matches) {

        // 1. スマホ端末でのTitel表示
        membersOnlyTitle.innerHTML = `<h2>Robotama Members  Page</h2>`;
    } else {
        // 2. PC・タブレット端末でのTitelサイズ
        membersOnlyTitle.innerHTML = `<h1>Gunmar Members Page</h1>`;
    }
    
</script>