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 相关文章推荐
jquery 插件 人性化的消息显示
Jan 21 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
Jun 20 Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
js实现抽奖效果
Mar 27 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
Apr 12 Javascript
node.js中express-session配置项详解
May 31 Javascript
自定义PC微信扫码登录样式写法
Dec 12 Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
使用JavaScript实现贪吃蛇游戏
Sep 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实现在站点里面添加邮件发送的功能
2020/04/28 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
HTML TO JavaScript 转换
2006/06/26 Javascript
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
node.js require() 源码解读
2015/12/13 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
python连接sql server乱码的解决方法
2013/01/28 Python
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
简化Python的Django框架代码的一些示例
2015/04/20 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
Python实现寻找回文数字过程解析
2020/06/09 Python
python脚本第一行如何写
2020/08/30 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
老公给老婆的保证书
2014/04/28 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
小学端午节活动总结
2015/02/11 职场文书
创先争优个人总结
2015/03/04 职场文书
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android
Redis RDB技术底层原理详解
2021/09/04 Redis
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers