JS에서 클라이언트 유형을 결정하는 방법
- php中世界最好的语言원래의
- 2018-04-13 17:39:201516검색
이번에는 JS를 사용하여 클라이언트 유형을 결정하는 방법과 JS가 클라이언트 유형을 결정하는 주의 사항에 대해 설명하겠습니다. 다음은 실제 사례입니다.
머리말
반응형 레이아웃을 작성할 때 항상 모바일 클라이언트인지 여부를 고려해야 합니다. 이를 기반으로 클라이언트가 iOS인지 Android인지 확인하는 4가지 방법이 있습니다. 모두가 참고할 수 있도록 공유하고 편집자와 함께 자세한 소개를 살펴보겠습니다.
방법은 다음과 같습니다.
1. 첫 번째: 브라우저의 userAgent를 판단하여 일반 규칙을 사용하여 iOS 클라이언트인지 Android 클라이언트인지 판단합니다
사용자 에이전트는 중국어로 사용자 에이전트라고 하며 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. 두 번째 방법: 모바일, 아이패드, 아이폰, 위챗, 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인지 모바일인지 결정
코드는 다음과 같습니다:
<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>
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
webpack+express 다중 페이지 사이트 개발 및 구현 단계
vue-cli+webpack vue 개발 환경 구축 방법
위 내용은 JS에서 클라이언트 유형을 결정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!