JavaScriptを使用してスマートフォンとPCを判断する方法（User Agent・画面幅）

JavaScriptを使用して、スマートフォンとパーソナルコンピュータ(PC)を判断する方法はいくつかあります。以下は、よく使用される方法の一例です。

User Agentの検出

User Agentは、WebブラウザーがWebサーバーに送信するHTTPリクエストヘッダーの一部であり、ブラウザーの種類やバージョン、オペレーティングシステムなどの情報が含まれています。これを使用して、スマートフォンとPCを判断することができます。

以下は、User Agentを使用したスマートフォンとPCの判断の例です。

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
  // スマートフォンの場合の処理
} else {
  // PCの場合の処理
}

例えば、以下のようにしてスマホのユーザーのみ、アプリのインストールを促すこともできます。

if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android)/)) {
  window.location.href = "https://example.com/app-download-page";
}

これにより、アプリのインストール画面にページのリダイレクトがかかります。

User Agentの詳細

User Agentは、ウェブブラウザーなどのクライアントアプリケーションがWebサーバーにリクエストを送信する際に、そのアプリケーションの情報を含むHTTPヘッダーの一部です。User Agentには、以下のような情報が含まれます。

1. アプリケーションの種類（ウェブブラウザーなど）
2. アプリケーションのバージョン
3. オペレーティングシステムの種類（Windows、Mac、iOSなど）
4. オペレーティングシステムのバージョン

たとえば、User Agentが「Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36」となっている場合、これはWindows 10を実行しているGoogle Chromeブラウザーのバージョン89であることを示しています。

画面幅の検出

スマートフォンとPCの画面幅は大きく異なるため、画面幅を使用して判断することもできます。

以下は、画面幅を使用したスマートフォンとPCの判断の例です。

if(window.innerWidth <= 768){
  // スマートフォンの場合の処理
} else {
  // PCの場合の処理
}

上記のコードでは、画面幅が768px以下の場合にはスマートフォンと判断しています。

まとめ

どちらの方法を選択するかは、開発者によって異なりますが、User Agentの検出は正確性が低い可能性があるため、画面幅を使用する方法が好まれることがあります。