详解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 相关文章推荐
javascript innerHTML使用分析
Dec 03 Javascript
javascript smipleChart 简单图标类
Jan 12 Javascript
分享几个超级震憾的图片特效
Jan 08 Javascript
js异步加载的三种解决方案
Mar 04 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
Nov 23 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
Jun 03 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
js模拟实现百度搜索
Jun 28 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 intval的测试代码发现问题
2008/07/27 PHP
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
简单实现异步编程promise模式
2015/07/31 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
python正则表达式的使用
2017/06/12 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
印度服装购物网站:Limeroad
2018/09/26 全球购物
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
高二美术教学反思
2014/01/14 职场文书
记帐员岗位责任制
2014/02/08 职场文书
应届大学生自荐书
2014/06/17 职场文书
高一课前三分钟演讲稿
2014/09/13 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
新郎答谢词
2015/01/04 职场文书
检讨书格式
2019/04/25 职场文书