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 相关文章推荐
自己的js工具 Event封装
Aug 21 Javascript
js打印纸函数代码(递归)
Jun 18 Javascript
JS控制日期显示的小例子
Nov 23 Javascript
js函数模拟显示桌面.scf程序示例
Apr 20 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
基于form-data请求格式详解
Oct 29 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
php提高网站效率的技巧
2015/09/29 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
php车辆违章查询数据示例
2016/10/14 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
jQuery 动画基础教程
2008/12/25 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
基于Jquery插件实现跨域异步上传文件功能
2016/04/26 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
对Python中for复合语句的使用示例讲解
2018/11/01 Python
Python基础教程之异常详解
2019/01/10 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
django框架forms组件用法实例详解
2019/12/10 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
《盲人摸象》教学反思
2014/02/16 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
关于国庆节的演讲稿
2014/09/05 职场文书
2014年评职称工作总结
2014/11/20 职场文书
售后服务质量承诺书
2015/04/29 职场文书
社区低保工作总结2015
2015/07/23 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
Python 统计序列中元素的出现频度
2022/04/26 Python