ブラウザ情報確認ツールの使い方・User Agent・画面解像度の調べ方

ウェブ開発やトラブルシューティングで、ブラウザの種類やバージョン、画面解像度、対応機能を確認したい場面は多くあります。ブラウザ情報確認ツールを使えば、User Agent文字列の解析から画面サイズ、Cookie対応状況まで、一目で確認できます。この記事では、各情報の意味と活用方法を解説します。

ブラウザ情報とは

ブラウザ情報とは、ウェブブラウザがウェブサーバーに送信する情報、およびブラウザ自体が持つ環境情報の総称です。JavaScriptのnavigatorオブジェクトやwindowオブジェクトを通じてこれらの情報を取得できます。ウェブ開発者はこの情報をもとに、ブラウザごとの表示差異の調査やレスポンシブデザインのデバッグを行います。

User Agentの読み方

User Agent（UA）文字列は、ブラウザが自身を識別するための文字列です。歴史的な経緯から非常に複雑な構造になっています。

# Chrome (Windows) の例
Mozilla/5.0 (Windows NT 10.0; Win64; x64)
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/120.0.0.0 Safari/537.36

# 各パートの意味
Mozilla/5.0     → 互換性のための固定文字列
Windows NT 10.0 → OS情報（Windows 10）
Win64; x64      → 64ビット版
AppleWebKit     → レンダリングエンジン
Chrome/120.0    → ブラウザ名とバージョン

画面解像度・デバイスピクセル比

画面解像度はレスポンシブデザインのデバッグに不可欠な情報です。特にデバイスピクセル比（DPR）は、Retinaディスプレイなどの高解像度画面で画像がぼやける問題の調査に重要です。

Cookie・JavaScript対応確認

ウェブアプリケーションがCookieやJavaScriptに依存している場合、ユーザーの環境でこれらが有効かどうかを確認することが重要です。ブラウザ情報ツールでは以下の項目を確認できます。

Web開発でのデバッグ活用

ブラウザ情報はバグ報告やサポート対応で非常に重要です。「このページが正しく表示されない」という問い合わせを受けた際、ユーザーのブラウザ情報を確認することで原因を素早く特定できます。

// JavaScriptでブラウザ情報を取得する例
const browserInfo = {
  userAgent: navigator.userAgent,
  language: navigator.language,
  platform: navigator.platform,
  cookieEnabled: navigator.cookieEnabled,
  screenWidth: screen.width,
  screenHeight: screen.height,
  viewportWidth: window.innerWidth,
  viewportHeight: window.innerHeight,
  pixelRatio: window.devicePixelRatio,
  online: navigator.onLine
};

console.table(browserInfo);

よくある質問