A-A+

js实现手机访问pc站点自动跳转到手机站点

2019年06月09日 前端设计 暂无评论 阅读 0 views 次

从营销角度来说的话,建网站一定要有两个版本,一个是电脑PC站点,一个是手机wap站点,当然,如果是博客blog的话,完全可以做个自适应,一个版本就可以了,但如果想要DIY电脑与手机站点的话,就需要两个版本了,这样设计的好处就是可以随意更换自己的站点风格,而且现在手机用户基数很大,甚至已经超过了电脑PC端的用户,所以从营销来说的话,手机站点是一定要有的。

然而,当我们PC和WAP都建好的时候,一旦手机用户进入到了PC站点,这个时候就需要进行相应的跳转了,这样的技术可以使用JS来判断客户端是否是手机用户,如果是手机用户就跳转到手机网站,如果是电脑用户则跳转到电脑网站,我们看如下的JS代码:

  1. <script language="JavaScript">  
  2.     function mobile_device_detect(url) {  
  3.         var thisOS = navigator.platform;  
  4.         var os = new Array("iPhone""iPod""iPad""android""Nokia""SymbianOS""Symbian""Windows Phone""Phone""Linux armv71""MAUI""UNTRUSTED/1.0""Windows CE""BlackBerry""IEMobile");  
  5.         for (var i = 0; i < os.length; i++) {  
  6.             if (thisOS.match(os[i])) {  
  7.                 window.location = url;  
  8.             }  
  9.   
  10.         }  
  11.         //因为相当部分的手机系统不知道信息,这里是做临时性特殊辨认  
  12.         if (navigator.platform.indexOf('iPad') != -1) {  
  13.             window.location = url;  
  14.         }  
  15.         //做这一部分是因为Android手机的内核也是Linux  
  16.         //但是navigator.platform显示信息不尽相同情况繁多,因此从浏览器下手,即用navigator.appVersion信息做判断  
  17.         var check = navigator.appVersion;  
  18.         if (check.match(/linux/i)) {  
  19.             //X11是UC浏览器的平台 ,如果有其他特殊浏览器也可以附加上条件  
  20.             if (check.match(/mobile/i) || check.match(/X11/i)) {  
  21.                 window.location = url;  
  22.             }  
  23.         }  
  24.         //类in_array函数  
  25.         Array.prototype.in_array = function(e) {  
  26.             for (i = 0; i < this.length; i++) {  
  27.                 if (this[i] == e) return true;  
  28.             }  
  29.             return false;  
  30.         }  
  31.     }  
  32.     mobile_device_detect("需要跳转的手机网址");  
  33. </script>  

我们把这段代码放到网页中就可以了,可以自动识别用户的客户端是电脑还是手机,然后进行相应的跳转,如果是内页的话,只需要一个内页变量就行了。是不是很简单呢。

标签:

给我留言

Copyright © 夏日博客 保留所有权利.   Theme  Ality 冀ICP备15026943号-3

用户登录