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 相关文章推荐
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 Javascript
JS实现搜索关键词的智能提示功能
Jul 07 Javascript
jquery animate动画持续运动的实例
Nov 29 jQuery
基于Vuejs的搜索匹配功能实现方法
Mar 03 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 Javascript
详解CocosCreator项目结构机制
Apr 14 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项目开发中最常用的自定义函数整理
2010/12/02 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
javascript实现原生ajax的几种方法介绍
2013/09/21 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
Vue循环遍历选项赋值到对应控件的实现方法
2020/06/22 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
python Django框架实现自定义表单提交
2016/03/25 Python
详解python多线程之间的同步(一)
2019/04/03 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
大学生毕业自荐信
2013/10/10 职场文书
入股协议书
2014/04/14 职场文书
传播学专业毕业生自荐书
2014/07/01 职场文书
活动经费申请报告
2015/05/15 职场文书
居安思危观后感
2015/06/11 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python
python3中apply函数和lambda函数的使用详解
2022/02/28 Python