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 相关文章推荐
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
javascript将相对路径转绝对路径示例
Mar 14 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 Javascript
json 带斜杠时如何解析的实现
Aug 12 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 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
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
js对象的构造和继承实现代码
2010/12/05 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
基于Require.js使用方法(总结)
2017/10/26 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
PyQt5每天必学之组合框
2018/04/20 Python
Python3爬虫全国地址信息
2019/01/05 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
python3实现猜数字游戏
2020/12/07 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
经典c++面试题二
2015/08/14 面试题
成人大专生实习期的自我评价
2013/10/02 职场文书
小学美术教学反思
2014/02/01 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
golang内置函数len的小技巧
2021/07/25 Golang
Android开发实现极为简单的QQ登录页面
2022/04/24 Java/Android
Android实现图片九宫格
2022/06/28 Java/Android