脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js判断PC端与移动端跳转

js判断PC端与移动端跳转

 更新时间：2020年12月24日 21:05:53   作者：叫我小龙哥  
本文主要介绍了js判断PC端与移动端跳转的方法，具有很好的参考价值。下面跟着小编一起来看下吧

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

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

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

以上的原因是因为，网上流传的判断为： 

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

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

下面脚本之家小编为大家分享网站常用的判断代码

pc自动跳移动端

(function() {
      if (/Android|webOS|iPhone|iPad|Windows Phone|iPod|BlackBerry|SymbianOS|Nokia|Mobile|Opera Mini/i.test(navigator.userAgent)) {
        var siteName = window.location.pathname;
        if (url.indexOf("?pc") < 0) {
          try {
				if (typeof siteName !== "undefined") {
            	window.location.href = "https://m.jb51.net" + siteName
          		} 
          } catch (e) {}
        }
      }
    })();

移动端自动跳pc端

;(function() {
  var reWriteUrl = function(url) {
    if (url) {
      var Splits = url.split("/"),
      siteName = window.location.pathname;
      if (typeof siteName !== "undefined") {
        return "https://www.jb51.net" + siteName
      }
    }
  };
  if (!/Android|webOS|iPhone|iPad|Windows Phone|iPod|BlackBerry|SymbianOS|Nokia|Mobile|Opera Mini/i.test(navigator.userAgent)) {
    var url = window.location.href;
    var pathname = window.location.pathname;
    if (url.indexOf("?m") < 0) {
      try {
        window.location.href = reWriteUrl(url)
      } catch(e) {}
    }
  }
})();

正确的判断应该为：

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

测试程序代码

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>");

完整版，运用于项目代码

/*
*
* 判断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 = "移动端网址";
 }
};

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JavaScript实现淘宝商品图切换效果

    JavaScript实现淘宝商品图切换效果

    这篇文章主要为大家详细介绍了JavaScript实现淘宝商品图切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-04-04
  • JavaScript修改浏览器tab标题小技巧

    JavaScript修改浏览器tab标题小技巧

    这篇文章主要介绍了JavaScript修改浏览器tab标题小技巧,需要的朋友可以参考下
    2015-01-01
  • js实现右下角窗口弹出窗口效果

    js实现右下角窗口弹出窗口效果

    好的朋友经常需要弹出信息，这个功能不错
    2008-09-09
  • 用innerhtml提高页面打开速度的方法

    用innerhtml提高页面打开速度的方法

    这篇文章介绍了用innerhtml提高页面打开速度的方法，有需要的朋友可以参考一下
    2013-08-08
  • 解决layer弹出层的内容页点击按钮跳转到新的页面问题

    解决layer弹出层的内容页点击按钮跳转到新的页面问题

    今天小编就为大家分享一篇解决layer弹出层的内容页点击按钮跳转到新的页面问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 微信小程序多表联合查询的实现详解

    微信小程序多表联合查询的实现详解

    小程序设计中，通常会根据业务来做多表的拆分，多表拆分一般是根据业务的特点进行拆分。比如我们在文章关注的业务中，会将文章和关注信息拆分成一对多的表关系。初学者可能对一对一、一对多、多对多的设计概念不是特别清楚
    2022-08-08
  • 在JS中如何使用css变量详解

    在JS中如何使用css变量详解

    这篇文章主要给大家介绍了关于如何在JS中如何使用css变量以及export之javascript关键字的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2021-09-09
  • canvas实现十二星座星空图

    canvas实现十二星座星空图

    本文主要分享了canvas实现十二星座星空图的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • JavaScript反射与依赖注入实例详解

    JavaScript反射与依赖注入实例详解

    这篇文章主要介绍了JavaScript反射与依赖注入,结合实例形式较为详细的分析了JavaScript反射与依赖注入的概念、原理、定义、使用方法及相关操作注意事项,需要的朋友可以参考下
    2018-05-05
  • webpack本地开发环境无法用IP访问的解决方法

    webpack本地开发环境无法用IP访问的解决方法

    下面小编就为大家分享一篇webpack本地开发环境无法用IP访问的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03

最新评论