黑帽联盟

标题: js判断PC端与移动端跳转 [打印本页]

---

作者: feihu    时间: 2017-7-3 22:37
标题: js判断PC端与移动端跳转
在网上看到很多这样类似的代码，但是有的很复杂，或者有的没有判断完全，上次经理去见完客户回来讲，使用苹果浏览打开pc端（pc已经做了识别跳转）会自动跳转到移动端的网页去，后来经测试才发现
document.writeln(" 是否为移动终端: "+browser.versions.mobile+"</br>");  //打印出来 true

所以在完整版的代码中 第一层if 判断一直是true

以上的原因是因为，网上流传的判断为：
mobile: !! u.match(/AppleWebKit.*Mobile.*/) || !! u.match(/AppleWebKit/), //是否为移动终端

判断不完整才会造成这种原因。

正确的判断应该为：
mobile: !! u.match(/AppleWebKit.*Mobile.*/) || !! u.match(/AppleWebKit/) && u.indexOf('QIHU') && u.indexOf('QIHU') > -1 && u.indexOf('Chrome') < 0, //是否为移动终端

测试程序代码

1. var browser = {
   
2. versions: function() {
   
3.   var u = navigator.userAgent;
   
4.   return {
   
5.    trident: u.indexOf('Trident') > -1,
   
6.    presto: u.indexOf('Presto') > -1,
   
7.    webKit: u.indexOf('AppleWebKit') > -1,
   
8.    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
   
9.    mobile: !! u.match(/AppleWebKit.*Mobile.*/) || !! u.match(/AppleWebKit/) && u.indexOf('QIHU') && u.indexOf('QIHU') > -1 && u.indexOf('Chrome') < 0,
   
10.    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
    
11.    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
    
12.    iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,
    
13.    iPad: u.indexOf('iPad') > -1,
    
14.    webApp: u.indexOf('Safari') == -1
    
15.   }
    
16. } (),
    
17. language:(navigator.browserLanguage || navigator.language).toLowerCase()
    
18. };
    
19. document.writeln("语言版本: "+browser.language+"</br>");
    
20. document.writeln(" 是否为移动终端: "+browser.versions.mobile+"</br>");
    
21. document.writeln(" ios终端: "+browser.versions.ios+"</br>");
    
22. document.writeln(" android终端: "+browser.versions.android+"</br>");
    
23. document.writeln(" 是否为iPhone: "+browser.versions.iPhone+"</br>");
    
24. document.writeln(" 是否iPad: "+browser.versions.iPad+"</br>");
    
25. document.writeln(navigator.userAgent+"</br>");

复制代码

完整版，运用于项目代码

1. /*
   
2. *
   
3. * 判断PC端与WAP端
   
4. */
   
5. var mobile_bs = {
   
6. versions: function() {
   
7.   var u = navigator.userAgent;
   
8.   return {
   
9.    trident: u.indexOf('Trident') > -1, //IE内核
   
10.    presto: u.indexOf('Presto') > -1, //opera内核
    
11.    webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
    
12.    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
    
13.    mobile: !! u.match(/AppleWebKit.*Mobile.*/) || !! u.match(/AppleWebKit/) && u.indexOf('QIHU') && u.indexOf('QIHU') > -1 && u.indexOf('Chrome') < 0, //是否为移动终端
    
14.    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
    
15.    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
    
16.    iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
    
17.    iPad: u.indexOf('iPad') > -1,  //是否iPad
    
18.    webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
    
19.   }
    
20. } ()
    
21. };
    
22. if (mobile_bs.versions.mobile) {
    
23. if (mobile_bs.versions.android || mobile_bs.versions.iPhone || mobile_bs.versions.iPad || mobile_bs.versions.ios) {
    
24.   window.location.href = "移动端网址";
    
25. }
    
26. };

复制代码

以上内容我自己转载网络的

---

作者: huangjia    时间: 2017-7-4 07:08
不错哈，看看

---

欢迎光临 黑帽联盟 (https://bbs.cnblackhat.com/)

Powered by Discuz! X2.5