JS를 사용하여 클라이언트 유형을 판단하는 네 가지 방법을 알아야 할 것

main text

preface4응답형 레이아웃을 작성할 때, 항상 모바일이 되는지 고려해야 합니다. 이에 따라 여기서 요약했습니다

이 방법으로 클라이언트가 ios나 android인지�断정합니다. 참고를 위해 공유합니다. 아래로 따라가서 자세한 소개를 보도록 하겠습니다.

1메서드는 다음과 같습니다:

. 첫 번째 방법: 브라우저의 userAgent를 통해 ios와 Android 클라이언트가 되는지 정규 표현식으로 확인합니다.

브라우저의 User Agent 문자열의 표준 형식: 브라우저 표识 (운영 체제 표识; 암호화 등급 표识; 브라우저 언어) 렌더링 엔진 표识 버전 정보. 하지만 각 브라우저는 다릅니다. User Agent 중文名은 사용자 대리자로, Http 프로토콜의 일부로, 헤더의 일부로, User Agent는 약칭 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, 웨이퍼, 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, //오페라 커너
   WebKit: u.indexOf('AppleWebKit') > -1, //아이폰, 구글内核
   gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//Firefox内核
   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, //웹 앱, 상단 및 하단이 없는
   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 또는 모바일 장치 여부 판단

코드는 다음과 같습니다:

<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 bIsIpad = sUserAgent.match(/ipad/
  var bIsIphone = sUserAgent.match(/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>

요약

이 글의 모든 내용이 끝납니다. 이 글의 내용이 여러분의 학습이나 업무에 도움이 되길 바랍니다. 궁금한 점이 있으시면 댓글을 통해 교류해 주세요. 감사합니다. 노아 튜토리얼에 대한 지원에 감사합니다.

언급: 본문 내용은 인터넷에서 가져왔으며, 저작권자가 모두 소유하고 있으며, 인터넷 사용자가 자발적으로 기여하고 자신의 내용을 업로드한 것입니다. 이 사이트는 소유권을 가지지 않으며, 인공적으로 편집하지 않았으며, 관련 법적 책임을 지지 않습니다. 저작권 문제가 있으신 경우 notice#w 이메일로 문의해 주시기 바랍니다.3codebox.com에 (이메일 작성 시 #을 @으로 변경해 주시고, 관련 증거를 제공하여, 실제로 확인되면, 이 사이트는 즉시 의심스러운 저작권 내용을 삭제할 것입니다.

기본 가이드

추천해드립니다