집 >웹 프론트엔드 >JS 튜토리얼 >클라이언트 유형을 결정하기 위해 JS를 사용하는 네 가지 방법

클라이언트 유형을 결정하기 위해 JS를 사용하는 네 가지 방법

小云云원래의: 2017-12-23 14:38:501654검색

반응형 레이아웃을 작성할 때 항상 모바일 클라이언트인지 고려해야 합니다. 이를 기반으로 클라이언트가 iOS인지 Android인지 확인하는 4가지 방법이 있습니다. 이 기사에서는 JS를 사용하여 클라이언트 유형을 결정하는 네 가지 방법을 주로 요약하고 소개합니다. 예를 들어 브라우저의 userAgent를 판단하고 모바일 단말(Mobile), ipad, iphone, WeChat, QQ 등인지 확인합니다. 필요한 경우 친구들이 이를 참조하여 모든 사람에게 도움이 되기를 바랍니다.

방법은 다음과 같습니다.

1. 첫 번째 방법: 브라우저의 userAgent를 판단하여 일반적인 규칙을 사용하여 iOS 클라이언트인지 Android 클라이언트인지 판단합니다.

User Agent를 중국어로 User Agent라고 합니다. 헤더 필드의 일부인 HTTP 프로토콜의 일부이며 사용자 에이전트는 UA라고도 합니다. 브라우저 유형 및 버전, 운영 체제 및 버전, 브라우저 커널 및 방문 웹사이트에 사용 중인 기타 정보를 제공하는 식별자인 특수 문자열 헤더입니다. 이 로고를 통해 사용자가 방문한 웹사이트는 사용자에게 더 나은 경험을 제공하거나 정보 통계를 수행하기 위해 다양한 레이아웃을 표시할 수 있습니다. 예를 들어 휴대전화에서 Google에 액세스하는 것은 컴퓨터에서 액세스하는 것과 다릅니다. 방문자의 UA입니다. UA는 자신을 위장할 수 있습니다.

브라우저 UA 문자열의 표준 형식: 브라우저 식별(운영 체제 식별, 암호화 수준 식별, 브라우저 언어) 렌더링 엔진 식별 버전 정보. 하지만 브라우저마다 다릅니다.

코드는 다음과 같습니다.

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

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

2.2 사용 방법

/判断是否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("移动端"); }

2.3 브라우저 언어 감지

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

3 iPhone|iPad|iPod|iOS|Android 클라이언트 결정

코드는 다음과 같습니다.

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
 //alert(navigator.userAgent); 
 window.location.href ="iPhone.html";
} else if (/(Android)/i.test(navigator.userAgent)) { //判断Android
 //alert(navigator.userAgent); 
 window.location.href ="Android.html";
} else { //pc
 window.location.href ="pc.html";
};

4. pc인지 pc인지 판별 모바일 단말기

코드는 다음과 같습니다:

<script>
　　//判断是否手机端访问
 var userAgentInfo = navigator.userAgent.toLowerCase();
 var Agents = ["android", "iphone",
    "symbianos", "windows phone",
    "ipad", "ipod"];
 var ly=document.referrer; //返回导航到当前网页的超链接所在网页的URL
 for (var v = 0; v < Agents.length; v++) {
  if (userAgentInfo.indexOf(Agents[v]) >= 0&&(ly==""||ly==null)) {
   this.location.href='http://m.***.com'; //wap端地址
  }
 }
</script>

5. 일반적으로 사용되는 점프 코드

코드 보기

<script type="text/javascript">
 // borwserRedirect
 (function browserRedirect(){
  var sUserAgent = navigator.userAgent.toLowerCase();
  var bIsIpad = sUserAgent.match(/ipad/i) == 'ipad';
  var bIsIphone = sUserAgent.match(/iphone os/i) == 'iphone os';
  var bIsMidp = sUserAgent.match(/midp/i) == 'midp';
  var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == 'rv:1.2.3.4';
  var bIsUc = sUserAgent.match(/ucweb/i) == 'web';
  var bIsCE = sUserAgent.match(/windows ce/i) == 'windows ce';
  var bIsWM = sUserAgent.match(/windows mobile/i) == 'windows mobile';
  var bIsAndroid = sUserAgent.match(/android/i) == 'android';
  var pathname = location.pathname
  if(bIsIpad || bIsIphone || bIsMidp || bIsUc7 || bIsUc || bIsCE || bIsWM || bIsAndroid ){
  window.location.href = 'http://m.geekjc.com'+pathname; //wap端地址
  }
 })();
 </script>

클라이언트 유형을 결정하기 위해 JS를 사용하는 네 가지 방법

관련 기사