详解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 相关文章推荐
改善用户体验的五款jQuery插件分享
May 22 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
npm scripts 使用指南详解
Oct 08 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
javascript实现简单打字游戏
Oct 29 Javascript
配置一个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连接MySQL数据的操作要点
2015/03/20 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
Javascript 面向对象特性
2009/12/28 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
jQuery获取cookie值及删除cookie用法实例
2016/04/15 Javascript
jquery.validate使用详解
2016/06/02 Javascript
Bootstrap表单布局
2016/07/19 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
Python SQLite3简介
2018/02/22 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
python逆序打印各位数字的方法
2018/06/25 Python
Python @property原理解析和用法实例
2020/02/11 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
Foot Locker澳洲官网:美国运动服和鞋类零售商
2019/10/11 全球购物
临床医师专业个人自我评价范文
2013/11/07 职场文书
自荐书格式
2013/12/01 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
现货白银电话营销话术
2015/05/29 职场文书
青年志愿者活动感想
2015/08/07 职场文书
运动会广播稿200字
2015/08/19 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书