夏日博客

A-A+

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

2019年06月09日 前端设计 评论 3 条 阅读 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>  

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

标签：

3 条留言  访客：3 条  博主：0 条

  1. boke112导航 2019年07月24日 下午 10:51  -199楼  回复

    理论上PC和移动分开更好，现在我们很多自适应站点只是把PC端某些东西隐藏起来以便适用移动端浏览，隐藏的东西一样加载。如果是分开就可以不用加载隐藏的部分，速度估计会更快。

  2. wordpress建站吧 2019年07月04日 上午 10:49  -198楼  回复

    这个主题之前我也用过

  3. 楚狂人 2019年06月29日 下午 7:01  -197楼  回复

    技术贴，支持分享

给我留言