スマホとPCで処理の仕方を変える方法の紹介。今までは画面幅で判別してきたが、今回はアクセスしてきた端末のユーザーエージェントを取得、解析して判別する方法のメモ。

    function device() {
      const ua = navigator.userAgent;
      if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
          return 'mobile';
      }else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
          return 'tablet';
      }else{
          return 'desktop';
      }
    }

    window.onload = function() {
      console.log(device());
    }

device()の返り値で端末を判断できます。
ただ、navigator.userAgentは将来的に非推奨とし、凍結するそうで、代替としてUser-Agent Client Hintsが策定中みたい。今後はそちらを使用していく。

参考