【JavaScript】スマホ判定する方法

7473 ワード
HTML 初心者 プログラミング勉強日記 JavaScript HTML テキストリンク

プログラミング勉強日記

2021年1月29日
JavaScriptでデバイスがスマホかどうか判定する方法について簡単にまとめる。

UserAgentから判定する

　UserAgentがiPhoneまたはAndroidとMobileを含む場合はスマホと判定できる。接続してきたユーザー情報を知るためにnavigatorオブジェクトのUserAgentを使用する。navigatorオブジェクトはいくつもの端末やブラウザの情報が格納されていて、プロパティとして情報を取得できる。

userAgentに含まれている情報の例
Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/577.01 
(KHTML, like Gecko) Version/6.8 Mobile/11A111 Safari/9788.91

function isSmartPhone() {
  // UserAgentからのスマホ判定
  if (navigator.userAgent.match(/iPhone|Android.+Mobile/)) {
    return true;
  } else {
    return false;
  }
}

デバイスの画面幅から判定する

　window.matchMedia()関数を使うことで、デバイス画面幅を判定できる。この方法はスマホを判断するのではなく、画面幅によってUIを変更したいときに使うのが望ましい。

function isSmartPhone() {
  // デバイス幅が640px以下の場合にスマホと判定する
  if (window.matchMedia && window.matchMedia('(max-device-width: 640px)').matches) {
    return true;
  } else {
    return false;
  }
}

サンプルプログラム

<html>
<head>
<title>スマホ判定</title>
</head>
<body>

<p>使用中の端末：</p>
<p id="Terminal"></p>

<script type="text/javascript">
    let tarminal = document.getElementById('Terminal')
    let msg = ""
    let ut = navigator.userAgent;

    if(ut.indexOf('iPhone') > 0 || ut.indexOf('iPod') > 0 || ut.indexOf('Android') > 0 && ut.indexOf('Mobile') > 0){
        msg = "SmartPhon";
    }else if(ut.indexOf('iPad') > 0 || ut.indexOf('Android') > 0){
        msg ="Tablet";
    }else{
        msg = "Personal Computer";
    }

    tarminal.textContent = msg
</script>

</body>
</html>

実行結果

参考文献

JavaScriptでスマホ判定する2つの方法
JavaScriptでアクセス元の端末がスマホかどうか判定する方法を現役エンジニアが解説【初心者向け】