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 相关文章推荐
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 Javascript
Vue-cli@3.0 插件系统简析
Sep 05 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
vue 虚拟DOM的原理
Oct 03 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 和 MySQL 基础教程(三)
2006/10/09 PHP
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
2012/02/27 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
Python中内建函数的简单用法说明
2016/05/05 Python
Python KMeans聚类问题分析
2018/02/23 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
HTML5 Geolocation API的正确使用方法
2018/12/04 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
美团网旗下网上订餐平台:美团外卖
2020/03/05 全球购物
文明美德伴我成长演讲稿
2014/05/12 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
Python爬虫入门案例之爬取去哪儿旅游景点攻略以及可视化分析
2021/10/16 Python
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python