HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのnavigator.userAgentプロパティとは？使い方とサンプルコードを解説

HTMLの navigator.userAgent プロパティは、ブラウザがサーバーへリクエストを送信する際に付与される「User-Agent」ヘッダーの値を取得するためのプロパティです。この値には、ブラウザの種類やバージョン、OSなどの情報が文字列として含まれており、JavaScriptから簡単に参照できます。

構文

navigator.userAgentプロパティの基本的な構文は以下の通りです。

navigator.userAgent

サンプルコード

ここでは、ボタンをクリックするとブラウザのUser-Agentヘッダーの値を画面に表示する簡単なデモを紹介します。

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      height: 100vh;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
      text-align: center;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 20px;
      width: 330px;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
   .show {
      font-size: 1.2rem;
      color: #fff;
   }
</style>
<body>
<h1>HTML navigator userAgent property Demo</h1>
<button class="btn" onclick="display()">Show user-agent header value</button>
<div class="show"></div>
<script>
   function display() {
      document.querySelector(".show").innerHTML = "<p>Browser user-agent header value is:</p>" + "<p>" + navigator.userAgent + "</p>";
   }
</script>
</body>
</html>

実行結果

ページを読み込むと、次のような画面が表示されます。

HTMLのnavigator.userAgentプロパティとは？使い方とサンプルコードを解説

「Show user-agent header value」ボタンをクリックすると、使用中のブラウザが送信しているUser-Agentヘッダーの値が画面に表示されます。

HTMLのnavigator.userAgentプロパティとは？使い方とサンプルコードを解説

補足：userAgentプロパティの活用ポイント

取得できるUser-Agent文字列には、例えば「Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 ...」のように、ブラウザ名・バージョン・OS情報などが含まれます。これを利用することで、アクセスしてきた環境に応じた処理（表示の切り替えやログ収集など）を行うことが可能です。

ただし、User-Agent文字列はユーザー側で変更できたり、ブラウザによって表記が異なる場合があるため、厳密な判定には注意が必要です。近年では、より信頼性の高い情報を得るために「User-Agent Client Hints」の利用も推奨されています。

  1. HTMLのnavigator.platformプロパティとは？使い方とサンプルコードを解説

    HTMLのnavigator.platformプロパティは、ブラウザがコンパイルされた（動作している）プラットフォームの情報を文字列として返します。このプロパティを利用することで、JavaScriptからユーザーのOS環境に関する情報を取得できます。 構文 navigator.platformプロパティの構文は以下の通りです。 navigator.platform 戻り値 このプロパティは、プラットフォーム名を表す文字列を返します。主な戻り値の例は以下の通りです。 Windows環境：「Win32」 Mac環境：「MacIntel」 Linux環境：「Linux x86_64」など HTM

  2. HTMLのnavigator.onLineプロパティでブラウザのオンライン・オフライン状態を判定する方法

    navigator.onLineプロパティは、ブラウザが現在オンライン状態かオフライン状態かを示す真偽値（boolean）を返します。このプロパティを活用すれば、ユーザーのネットワーク接続状況をJavaScriptで簡単に検出し、それに応じた処理を実装することができます。 構文 基本的な構文は以下のとおりです。 navigator.onLine 戻り値は次のようになります。 オンラインの場合：true オフラインの場合：false サンプルコード ここでは、HTMLのnavigator onLineプロパティを使用した具体的な例を紹介します。ボタンをクリックすると、ブラウザがオンラインかオ