你的位置:首页 > 互联网IT

PC端与移动端跳转

2018-03-18 浏览:(1406995) 互联网IT 评论(0)

PC端与移动端跳转


QQ截图20180318233016.jpg PC端与移动端跳转 互联网IT


方案一


在网上看到很多这样类似的代码,但是有的很复杂,或者有的没有判断完全,上次经理去见完客户回来讲,使用苹果浏览打开pc端(pc已经做了识别跳转)会自动跳转到移动端的网页去,后来经测试才发现

document.writeln(" 是否为移动终端: "+browser.versions.mobile+"</br>");  //打印出来 true

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

以上的原因是因为,网上流传的判断为: 

mobile: !! u.match(/AppleWebKit.*Mobile.*/) || !! u.match(/AppleWebKit/), //是否为移动终端

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

正确的判断应该为:

1
mobile: !! u.match(/AppleWebKit.*Mobile.*/) || !! u.match(/AppleWebKit/) && u.indexOf('QIHU') && u.indexOf('QIHU') > -1 && u.indexOf('Chrome') < 0, //是否为移动终端

测试程序代码

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

完整版,运用于项目代码

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


方法二:使用navigator.platform 和navigator.appVersion 判 断

<script LANGUAGE="JavaScript">
 function mobile_device_detect(url) {
        var thisOS=navigator.platform;
        var os=new Array("iPhone","iPod","iPad","android","Nokia","SymbianOS","Symbian","Windows Phone","Phone","Linux armv71","MAUI","UNTRUSTED/1.0","Windows CE","BlackBerry","IEMobile");
 for(var i=0;i<os.length;i++)        {
 if(thisOS.match(os[i]))        {  
  window.location=url;
 }
          
 }
 //因为相当部分的手机系统不知道信息,这里是做临时性特殊辨认
 if(navigator.platform.indexOf('iPad') != -1)        {
  window.location=url;
 }
 //做这一部分是因为Android手机的内核也是Linux
 //但是navigator.platform显示信息不尽相同情况繁多,因此从浏览器下手,即用navigator.appVersion信息做判断
  var check = navigator.appVersion;
  if( check.match(/linux/i) )          {
   //X11是UC浏览器的平台 ,如果有其他特殊浏览器也可以附加上条件
   if(check.match(/mobile/i) || check.match(/X11/i))                 {
   window.location=url;
   } 
 }
 //类in_array函数
 Array.prototype.in_array = function(e) {
  for(i=0;i<this.length;i++)  {
   if(this[i] == e)   return true;
  }
  return false;
 }
 }mobile_device_detect("http://********.com/m");</script>

代码中的http://********.com/m 为手机站点。



  1. 方法三: 需在pc端代码处加入

        <script type="text/javascript">        (function () {            var sUserAgent = navigator.userAgent;            if (sUserAgent.indexOf('Android') > -1 || sUserAgent.indexOf('iPhone') > -1 || sUserAgent.indexOf('iPad') > -1 || sUserAgent.indexOf('iPod') > -1 || sUserAgent.indexOf('Symbian') > -1) {

                    location.href = '将要跳转的url';            } else {

                }        })();    </script>

    程序会自动判断访问者客户端,然后进行跳转








  1.  方法四:可在pc端代码处加入:

    <script language=javascript>




      if(screen.width<='1024')




      window.location = "手机端url";




    else{}




    </script>

     

    手机端代码处加入:

    <script language=javascript> 

      if(screen.width<='640')  

      window.location = "pc端url";

    else{}

    </script>


    通过判断访问者浏览器分辨率进行跳转


  • 发表评论
  • 查看评论
【暂无评论!】

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。