js判断PC端与移动端跳转


Posted in Javascript onDecember 24, 2020

在网上看到很多这样类似的代码,但是有的很复杂,或者有的没有判断完全,上次经理去见完客户回来讲,使用苹果浏览打开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.3water.com" + 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://3water.com" + 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 相关文章推荐
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
浅析js中substring和substr的方法
Nov 09 Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
ES6学习教程之Map的常用方法总结
Aug 03 Javascript
jquery编写日期选择器
Mar 16 #Javascript
jquery事件与绑定事件
Mar 16 #Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 #Javascript
JSON与js对象序列化实例详解
Mar 16 #Javascript
JS对象的深度克隆方法示例
Mar 16 #Javascript
JS对象深度克隆实例分析
Mar 16 #Javascript
JS异步加载的三种实现方式
Mar 16 #Javascript
You might like
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
常见python正则用法的简单实例
2016/06/21 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
Css3圆角边框制作代码
2015/11/18 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
存储过程和sql语句的优缺点
2014/07/02 面试题
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
夜大毕业生自我鉴定
2013/10/31 职场文书
创业计划书如何编写
2014/02/06 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
学徒工职责
2014/03/06 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
电力培训心得体会
2014/09/02 职场文书
慰问信模板
2015/02/14 职场文书
史上最牛的辞职信
2015/02/28 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书