UserAgentを用いた端末判定で、Chromeディベロッパーツールでのデバック時の注意点

はじめに

以下のように、UserAgentの文字列を判定してユーザーの端末を判定することがよくある。

<?php
    $ua = $_SERVER['HTTP_USER_AGENT'];

    if ((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) ||
      (strpos($ua, 'iPhone') !== false)) {
      //SPの場合
      
    } elseif ((strpos($ua, 'Android') !== false) || (strpos($ua, 'iPad') !== false)) {
      //TBの場合
      
    } else {
      //PCの場合
      }
  ?>

Google Chromeのディベロッパーツールのデバイスモードで使用デバイスを変更しながら動作確認を行なっていたところ、「Responsive」モードでPCが返ってくることを期待したがSPの処理が返ってきた。

この時、NetworkタブでリクエストのUserAgentを確認したところ、以下のようになっていた。

user-agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Mobile Safari/537.36

「Android」と「Mobile」が入っているのでSP判定になっていた。

任意のUserAgentに変更する

右上の「︙」アイコン → More tools → Network conditions → User agent を編集


再読み込みをすると、「Android」と「Mobile」が消えており、指定したUserAgentになっていたので動作確認ができた。

user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.51 Safari/537.36