详解JS判断页面是在手机端还是在PC端打开的方法


Posted in Javascript onApril 26, 2019

我们想要的效果是pc文件和mobile文件统一入口,适配不同的设备。
先看看项目的目录:

详解JS判断页面是在手机端还是在PC端打开的方法

在index.html里面配置js控制选择那一个文件夹下的文件就可以了。
我们要利用:Navigator 对象,Navigator 对象包含有关浏览器的信息。
index.html很简单,直接上码吧:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
		<script type="text/javascript">
			function browserRedirect() {
	  var sUserAgent = navigator.userAgent.toLowerCase();
	  var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
	  var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
	  var bIsMidp = sUserAgent.match(/midp/i) == "midp";
	  var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
	  var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
	  var bIsAndroid = sUserAgent.match(/android/i) == "android";
	  var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
	  var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
	  if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
	  //跳转移动端页面
	  window.location.href="http://f.jcngame.com/fanfan20171208/mobile/index.html" rel="external nofollow" rel="external nofollow" ;
	  } else {
	  //跳转pc端页面
	  window.location.href="http://f.jcngame.com/fanfan20171208//fanmai/index.html" rel="external nofollow" rel="external nofollow" ;
	  }
	 }
			browserRedirect(); 
		</script>
	</head>
	<body>
		
	</body>
</html>

补充,感觉之前代码太冗余了,现在用正则来优化了一下:

<script type="text/javascript">
	function browserRedirect() {
  var sUserAgent = navigator.userAgent.toLowerCase();
  if (/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(sUserAgent)) {
  //跳转移动端页面
  window.location.href="http://f.jcngame.com/fanfan20171208/mobile/index.html" rel="external nofollow" rel="external nofollow" ;
  } else {
  //跳转pc端页面
  window.location.href="http://f.jcngame.com/fanfan20171208//fanmai/index.html" rel="external nofollow" rel="external nofollow" ;
  }
 }
	browserRedirect(); 
</script>

详解JS判断页面是在手机端还是在PC端打开的方法

详解JS判断页面是在手机端还是在PC端打开的方法

以上所述是小编给大家介绍的JS判断页面是手机端还是在PC端打开的方法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
身份证号码前六位所代表的省,市,区, 以及地区编码下载
Apr 12 Javascript
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
jquery 缓存问题的几个解决方法
Nov 11 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 Javascript
JS获取动态添加元素的方法详解
Jul 31 Javascript
jQuery中DOM操作原则实例分析
Aug 01 jQuery
详细分析JavaScript中的深浅拷贝
Sep 17 Javascript
Vue实现小购物车功能
Dec 21 Vue.js
配置一个vue3.0项目的完整步骤
Apr 26 #Javascript
关于Vue源码vm.$watch()内部原理详解
Apr 26 #Javascript
JS异步错误捕获的一些事小结
Apr 26 #Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 #Javascript
vue请求本地自己编写的json文件的方法
Apr 25 #Javascript
vue中img src 动态加载本地json的图片路径写法
Apr 25 #Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 #Javascript
You might like
Php获取金书网的书名的实现代码
2010/06/11 PHP
PHP错误机制知识汇总
2016/03/24 PHP
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
es6数值的扩展方法
2019/03/11 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
Python批量按比例缩小图片脚本分享
2015/05/21 Python
python if not in 多条件判断代码
2016/09/21 Python
Python基础练习之用户登录实现代码分享
2017/11/08 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
python右对齐的实例方法
2020/07/05 Python
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
欢迎新生标语
2014/10/06 职场文书
村党组织公开承诺书
2015/04/30 职场文书
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS
Python中tqdm的使用和例子
2022/09/23 Python