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 相关文章推荐
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 Javascript
jQuery DOM操作实例
Mar 05 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
node.js实现登录注册页面
Apr 08 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
浅析vue给不同环境配置不同打包命令
Aug 17 Javascript
mpvue 单文件页面配置详解
Dec 02 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
JS实现进度条动态加载特效
Mar 25 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
Jun 02 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
咖啡界又出新概念,无需咖啡豆的分子咖啡
2021/03/03 咖啡文化
php中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
使用PHP处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
学习ExtJS TextField常用方法
2009/10/07 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
python提示No module named images的解决方法
2014/09/29 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
外贸学院会计专业应届生求职信
2013/11/14 职场文书
酒鬼酒广告词
2014/03/21 职场文书
销售顾问工作计划书
2014/08/15 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
好媳妇事迹材料
2014/12/24 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
2016年教代会开幕词
2016/03/04 职场文书
财务年终工作总结大全
2019/06/20 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
Python预测分词的实现
2021/06/18 Python
Python 多线程处理任务实例
2021/11/07 Python
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android