JSを使用してクライアントの種類を決定する方法-jsチュートリアル-php.cn

JSを使用してクライアントの種類を決定する方法

亚连

リリース： 2018-06-19 09:36:26

オリジナル

1530 人が閲覧しました

この記事では主に、ブラウザのuserAgentの判定、携帯端末(Mobile)、iPad、iPhone、WeChat、QQなど、友達かどうかの確認など、JSを使用してクライアントの種類を判定する4つの方法をまとめて紹介します。必要な場合は、以下を参照してください。

前書き

レスポンシブレイアウトを作成するときは、常にモバイル端末かどうかを考慮する必要があります。これに基づいて、クライアントが iOS であるかどうかを判断する 4 つの方法を示します。またはアンドロイド。皆さんの参考や勉強のために共有してください。編集者と一緒に詳細な紹介を見てみましょう。

方法は次のとおりです:

1. 1つ目: ブラウザのuserAgentを判断し、通常のルールを使用してiOSクライアントかAndroidクライアントかを判断します

User Agentは中国語ではユーザーエージェントと呼ばれ、HTTP プロトコルの一部であり、ヘッダーフィールドの一部であるため、ユーザーエージェントは UA とも呼ばれます。これは特別な文字列ヘッダーであり、ブラウザの種類とバージョン、オペレーティングシステムとバージョン、ブラウザカーネル、および訪問する Web サイトに使用しているその他の情報を提供する識別子です。このロゴを通じて、ユーザーが訪問する Web サイトは、ユーザーにより良いエクスペリエンスを提供したり、情報統計を実行したりするために、さまざまなレイアウトを表示できます。たとえば、携帯電話での Google へのアクセスは、コンピューターでのアクセスとは異なります。これらは、Google によって決定されます。の訪問者のUAさん。 UAは自分自身を偽装することができます。

ブラウザの UA 文字列の標準形式: ブラウザ識別 (オペレーティングシステム識別、暗号化レベル識別、ブラウザ言語) レンダリングエンジン識別バージョン情報。ただし、ブラウザごとに異なります。

コードは次のとおりです:

<script type="text/javascript">
 var u = navigator.userAgent;
 var isAndroid = u.indexOf(&#39;Android&#39;) > -1 || u.indexOf(&#39;Adr&#39;) > -1; //android终端
 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
 alert(&#39;是否是Android：&#39;+isAndroid);
 alert(&#39;是否是iOS：&#39;+isiOS);
</script>

ログイン後にコピー

2. 2 番目のタイプ: モバイル、iPad、iPhone、WeChat、QQ などであるかどうかを確認します。下2.1のコードは以下の通りです:

<script type="text/javascript">
//判断访问终端
var browser={
 versions:function(){
  var u = navigator.userAgent, 
   app = navigator.appVersion;
  return {
   trident: u.indexOf(&#39;Trident&#39;) > -1, //IE内核
   presto: u.indexOf(&#39;Presto&#39;) > -1, //opera内核
   webKit: u.indexOf(&#39;AppleWebKit&#39;) > -1, //苹果、谷歌内核
   gecko: u.indexOf(&#39;Gecko&#39;) > -1 && u.indexOf(&#39;KHTML&#39;) == -1,//火狐内核
   mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
   ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
   android: u.indexOf(&#39;Android&#39;) > -1 || u.indexOf(&#39;Adr&#39;) > -1, //android终端
   iPhone: u.indexOf(&#39;iPhone&#39;) > -1 , //是否为iPhone或者QQHD浏览器
   iPad: u.indexOf(&#39;iPad&#39;) > -1, //是否iPad
   webApp: u.indexOf(&#39;Safari&#39;) == -1, //是否web应该程序，没有头部与底部
   weixin: u.indexOf(&#39;MicroMessenger&#39;) > -1, //是否微信 （2015-01-22新增）
   qq: u.match(/\sQQ/i) == " qq" //是否QQ
  };
 }(),
 language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
</script>

ログイン後にコピー

eの使い方

/判断是否IE内核
if(browser.versions.trident){ alert("is IE"); }
//判断是否webKit内核
if(browser.versions.webKit){ alert("is webKit"); }
//判断是否移动端
if(browser.versions.mobile||browser.versions.android||browser.versions.ios){ alert("移动端"); }

ログイン後にコピー

3. iPhone | iPod | Androidクライアント

4. PC かモバイル端末かを決定します

コードは次のとおりです:

currentLang = navigator.language; //判断除IE外其他浏览器使用语言
if(!currentLang){//判断IE浏览器使用语言
currentLang = navigator.browserLanguage;
}
alert(currentLang);

ログイン後にコピー

5. よく使われるジャンプコード

上記は私が皆さんのためにまとめたものです。将来的には誰にとっても役立つことを願っています。

関連記事: Vue使用時にブラウザバック時にbeforeRouteLeaveが起動できない問題

fastclickコードのタップ「クリックスルー」を解決する方法

アニメーション効果を実装する方法anime.js Box をチェックイン

vue の共通コンポーネントとフレームワーク構造 (詳細なチュートリアル)

以上がJSを使用してクライアントの種類を決定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。