详解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 相关文章推荐
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
script标签属性type与language使用选择
Dec 02 Javascript
页面按钮禁用与解除禁用的方法
Feb 19 Javascript
什么是Node.js?Node.js详细介绍
Jun 01 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
JavaScript中this用法学习笔记
Mar 17 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遍历数组的几种方法
2012/03/22 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
axios学习教程全攻略
2017/03/26 Javascript
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
javascript自定义日期比较函数用法示例
2019/07/22 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
python实现Adapter模式实例代码
2018/02/09 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
销售主管竞聘书
2014/03/31 职场文书
职业规划实施方案
2014/06/10 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
地道战观后感
2015/06/04 职场文书
法制主题班会教案
2015/08/13 职场文书
《风筝》教学反思
2016/02/23 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP
分享7个 Python 实战项目练习
2022/03/03 Python
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫
部分武汉产收音机展览
2022/04/07 无线电