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扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
Apr 26 Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
canvas绘制的直线动画
Jan 23 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
Vue项目中使用Vux的安装过程
May 01 Javascript
图解javascript作用域链
May 27 Javascript
js实现开关灯效果
Mar 30 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
3.从实例开始
2006/10/09 PHP
php daodb插入、更新与删除数据
2009/03/19 PHP
深入php socket的讲解与实例分析
2013/06/13 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
PHP引用返回用法示例
2016/05/28 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
jquery蒙版控件实现代码
2010/12/08 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
详细介绍Python语言中的按位运算符
2013/11/26 Python
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
python3去掉string中的标点符号方法
2019/01/22 Python
Python 求数组局部最大值的实例
2019/11/26 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
澳大利亚网上书店:QBD
2021/01/09 全球购物
大学生护理专业自荐信
2013/10/03 职场文书
结婚周年感言
2014/02/24 职场文书
大学新闻系求职信
2014/06/03 职场文书
七一党日活动总结
2014/07/08 职场文书
授权委托书
2014/07/31 职场文书
2014年销售工作总结
2014/12/01 职场文书
法律意见书范本
2015/06/04 职场文书
Python预测分词的实现
2021/06/18 Python
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL
MySQL中优化SQL语句的方法(show status、explain分析服务器状态信息)
2022/04/09 MySQL