クライアントは、ブラウザ間に存在する違いを確認しました.

プラットフォームにまたがるブラウザはバージョンが同じであるにもかかわらず、常に異なる問題が存在し、合格の先端開発として、最大公約数に向けて設計する必要があります.これらの欠陥を克服または回避するために、様々な方法を使用してクライアントを検出しなければなりません.
私達の目的は:第一、絶対に意地を張らないことです.第二に、ブラウザを絶対に見逃さない.第三に、ブラウザが綺麗であることを絶対に保証します.
いつでも、より一般的なプランがあれば、迷うことなく選択するべきです.まず、最もよく使われているプログラムを設計して、特定のブラウザの救済を考えます.
能力テスト
能力検出(特性検出ともいう)は、JavaScript実行時に簡単な検出ロジックを使用して、ブラウザがある特性をサポートするかどうかをテストします.

if (object.propertyInQuestion) {
     
//    object.propertyInQuestion
}

1、安全能力検査
能力検出の最も効果的なシーンは、能力が存在するかどうかを検出しながら、意図した挙動を示すことができるかを検証することである.
以下の関数を使って、オブジェクトの並べ替えが可能かどうかを確認します.

//      ！       ，           
function isSortable(object) {
     
return !!object.sort;
}

属性の存在を簡単にテストします.このオブジェクトを表すものではなく、並べ替えができます.より良い方法は、sortが関数かどうかを検出することです.

//    ，   sort      
function isSortable(object) {
     
return typeof object.sort == "function";
}

上記のコードで使用されているtypeofオペレータは、ソートが関数であるかどうかを判定し、データを並べ替えるために呼び出しができるかを確認することができる.
2、能力検査に基づいてブラウザ分析を行う
特性を検出
場面:能力に応じてブラウザを分類することができます.

//           Netscape     
let hasNSPlugins = !!(navigator.plugins && navigator.plugins.length);
//           DOM Level 1   
let hasDOM1 = !!(document.getElementById && document.createElement &&
document.getElementsByTagName);

ブラウザを検出
シーン:ブラウザの特性を検出し、既知の特性と比較して、ユーザが使用しているブラウザは何かを確認することができます.
利点:ユーザーコードの嗅覚(後述)よりも正確な結果.
短所:未来のブラウザバージョンはこのプログラムに適用されないかもしれません.
未来のブラウザバージョンはこのプログラムに適用されないかもしれません.
1つまたは複数の能力を検出することによって、どのブラウザを使用しているかは常に確定されません.能力検査は、次のステップをどうするかを決めるのに最適で、必ずしもブラウザを識別できるとは限らない.
ユーザエージェント検出
ユーザエージェントは、ブラウザのユーザエージェント文字列を介して、どのブラウザを使用しているかを検出する.ユーザエージェント文字列は、各HTTP要求のヘッダに含まれており、JavaScriptではnavigator.userAgentを介してアクセスすることができる.
ブラウザ解析
自分のコードがどのブラウザで実行されているかを知りたいなら、ほとんどの開発者はwindow.navigator.userAgentが返した文字列の値を分析します.
ユーザーエージェントを偽造する
ユーザエージェントを検出してブラウザを識別することは完璧な方法ではない.ただし、window.navigatorオブジェクトを実装するブラウザ(すなわち、すべての近代的なブラウザ)は、この読み取り専用属性をuserAgentに提供する.
この種の偽装に対処するのは骨折り損のくたびれもうけである.ユーザーエージェントがこのように改竄されたかどうかを調べることは可能ですが、全体的には猫がネズミを捕るゲームです.
分析ブラウザ

ブラウザ

ブラウザバージョン

ブラウザレンダリングエンジン

デバイスタイプ(デスクトップ/モバイル)

設備メーカー

デバイス型番

オペレーティングシステム

オペレーティングシステムバージョン

ソフトウェアとハードウェアの検査
現代ブラウザは、ブラウザ、オペレーティングシステム、ハードウェア、周辺機器情報などのページ実行環境に関する情報のセットを提供しています.これらの属性は、window.navigatorに露出されたAPIのセットによって得ることができる.しかし、これらのAPIのブラウザ間のサポートはまだ十分ではなく、標準化のレベルに達していません.
1、ブラウザとオペレーティングシステムを識別するnavigator及びscreenオブジェクトは、ページが存在するソフトウェア環境に関する情報も提供する.
navigator.oscpu

navigator.oscpu        ，                /        。

navigator.ventdor

navigator.vendor        ，            。           navigator         。

navigator.plotform

navigator.platform         ，              。

screen.co lorDepthとscreen.pixelDepth

 screen.colorDepth   screen.pixelDepth       ，            

screen.orentation

screen.orientation        ScreenOrientation   ，     Screen Orientation API
       。

2、ブラウザのメタデータnavigatorオブジェクトはいくつかのAPIを露出しており、ブラウザおよびオペレーティングシステムの状態情報を提供することができる.
Geolocation API

navigator.geolocation       Geolocation API，                  
 。

注意⚠️:このAPIは、セキュリティ実行環境(HTTPSによって取得されたスクリプト)でのみ利用可能である.
Connection StateとNetwork Information API

                        ：      navigator.onLine   。
   ，          ，      window       offline   。

Battery Starts API

                   。 navigator.getBattery()           ，      BatteryManager   

3、ハードウエア
ブラウザでハードウェアを検出する能力はかなり限られています.しかし、navigatorオブジェクトは、いくつかの属性を通して基本的な情報を提供している.
プロセッサコア数

navigator.hardwareConcurrency                    ，      
       （         ，      1）。

デバイスメモリサイズ

navigator.deviceMemory                ，      GB     （  
      2   ： 512MB    0.5， 4GB    4）。

最大タッチ数

navigator.maxTouchPoints                   ，       。

最後に
クライアント検出方法を選択する場合、まず使用能力の検出が優先される.特殊能力検査は二次位置に置いて、コードロジックを決定する参考とします.ユーザエージェント検出は、ユーザエージェント文字列に依存しすぎるので、最後の選択である.