JavaScript を使用して userAgent を通じていくつかの一般的なブラウザを判別する方法

序文

通常、h5 ページを作成するときは、WeChat、QQ、Weibo などのエコシステム内でトラフィックの迂回作業を行う必要がありますが、トラフィックの迂回はこれらのプラットフォームによって制限されます。例えば、前回の記事「h5 ウェイクアップ アプリの実装と注意点」は妥協案です。では、これらのよく使われるブラウザのユーザー エージェントはどのようなものでしょうか。どう判断する？今日はこの問題を詳しく見てみましょう。

ユーザーエージェントの定義

ユーザー エージェントは、User Agent の中国語名で、UA と略されます。これは、クライアントが使用するオペレーティング システムとバージョン、CPU タイプ、ブラウザーとバージョン、ブラウザーのレンダリング エンジン、ブラウザーの言語、ブラウザーのプラグインなどをサーバーが識別できるようにする特別な文字列ヘッダーです。 ---百度百科より

この文から、UA を通じてユーザーが使用しているオペレーティング システムやバージョン、CPU の種類、ブラウザやバージョンなどの情報を取得できることがわかりますね。

いくつかの一般的なブラウザUA

ここではWeChat、Weibo、QQなどのブラウザのみが取得されています。残りはまだ取得されていません。追加がある場合は、プライベートメッセージを送信するか、コメントを残してください。

アンドロイド

現在使用されているAndroidバージョンはHuawei Honor V9 Playで、現在のAndroidシステムバージョンは7.0、EMUIバージョンは5.1です。

QQブラウザ

• UA: mozilla/5.0 (linux; u; android 7.0; zh-cn; jmm-al10 build/honorjmm-al10) applewebkit/537.36 (khtml、gecko に類似) version/4.0 chrome/66.0.3359.126 mqqbrowser/9.6 mobile safari/537.36
• バージョン：9.6.0.5170

QQ

• UA：mozilla/5.0 (linux; android 7.0; jmm-al10 build/honorjmm-al10; wv) applewebkit/537.36 (khtml, like gecko) version/4.0 chrome/62.0.3202.84 mobile safari/537.36 v1_and_sq_8.1.0_1232_yyb_d qq/8.1.0.4150 nettype/wifi webp/0.4.1 pixel/720 statusbarheight/49 simpleuiswitch/0
• バージョン：8.1.0.4150

微信

• UA: mozilla/5.0 (linux; android 7.0; jmm-al10 build/honorjmm-al10; wv) applewebkit/537.36 (khtml、gecko など) version/4.0 chrome/66.0.3359.126 mqqbrowser/6.2 tbs/044807 mobile safari/537.36 mmwebid/4093 micromessenger/7.0.6.1460(0x27000634) process/tools nettype/wifi language/zh_cn
• バージョン：7.0.6

微博

• UA：mozilla/5.0 (linux; android 7.0; jmm-al10 build/honorjmm-al10; wv) applewebkit/537.36 (khtml, like gecko) version/4.0 chrome/62.0.3202.84 mobile safari/537.36 weibo (huawei-jmm-al10__weibo__9.8.0__android__android7.0)
• バージョン：9.8.0

りんご

Appleは現在iPhone 6s Plusを使用しており、現在のiOSバージョンは12.4です。

QQブラウザ

• UA: mozilla/5.0 (iphone; cpu iphone os 12_4 like mac os x) applewebkit/605.1.15 (khtml, like gecko) version/12.0 mqqbrowser/9.6.0 mobile/15e148 safari/604.1 qbwebviewua/2 qbwebviewtype/1 wktype/1
• バージョン：9.6.0.4193

QQ

• UA：mozilla/5.0 (iphone; cpu iphone os 12_4 like mac os x) applewebkit/605.1.15 (khtml, like gecko) mobile/15e148 qq/8.1.0.437 v1_iph_sq_8.1.0_1_app_a pixel/1080 core/wkwebview device/apple(iphone 6splus) nettype/wifi qbwebviewtype/1 wktype/1
• バージョン：8.1.0.437

微信

• UA: mozilla/5.0 (iphone; cpu iphone os 12_4 like mac os x) applewebkit/605.1.15 (khtml, like gecko) mobile/15e148 micromessenger/7.0.5(0x17000523) nettype/wifi language/zh_cn
• バージョン：7.0.5

微博

• UA: mozilla/5.0 (iphone; cpu iphone os 12_4 like mac os x) applewebkit/605.1.15 (khtml, like gecko) mobile/15e148 weibo (iphone8,2__weibo__9.7.1__iphone__os12.4)
• バージョン：9.7.1

上記のUA値はすべてtoLowerCaseで処理されるため、すべて小文字になります。

よく使われるブラウザを個別に特定する

判断する前に、UA ですべての文字を小文字に変換する操作 (toLowerCase で実行可能) を実行し、個別に判断する必要があります。

上記の UA を通じて判断するのは実はとても簡単です。前回の記事では、次のように記述する方法がすでにあります。

/micromessenger/i.test(u) // WeChat をチェック u.indexOf("weibo") > -1 // Weibo をチェック u.indexOf("qq") > -1 // QQ をチェック
u.indexOf("mqqbrowser") > -1 // QQブラウザを決定する

QQ では qq の前にスペースが必要であることに注意してください。

追加情報を入手する

上記の UA から、現在のシステムが Android であるか iOS であるかを UA によって判別できることは難しくありません。これは次のコードで区別できます。

/android/i.test(UA) //Android を判定
/(iPhone|iPad|iPod|iOS)/i.test(UA) //iOS を判定

上記のデータには、携帯電話の具体的な種類も示されていますが、ここでは詳しく紹介しません。さらに、Quark や UC など、多くのモバイル ブラウザーは UA を変更できます。詳しく調べれば、より多くの情報が得られます。

要約する

これで、JavaScript が userAgent を通じていくつかの一般的なブラウザを判別する方法についてのこの記事は終了です。より関連性の高い JS userAgent ブラウザ判別コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。