详解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 ajax 同步异步的执行示例代码
Jun 23 Javascript
Javascript 面向对象编程(coolshell)
Mar 18 Javascript
关于js遍历表格的实例
Jul 10 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
jQuery简单实现title提示效果示例
Aug 01 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
自制简易打赏功能的实例
Sep 02 Javascript
Vuex中的State使用介绍
Jan 19 Javascript
javascript实现前端input密码输入强度验证
Jun 24 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作的文本留言本的例子(一)
2006/10/09 PHP
PHP制作图型计数器的例子
2006/10/09 PHP
php下将XML转换为数组
2010/01/01 PHP
PHP简洁函数小结
2011/08/12 PHP
那些年一起学习的PHP(一)
2012/03/21 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
php采用curl访问域名返回405 method not allowed提示的解决方法
2014/06/26 PHP
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
python编写简单端口扫描器
2019/09/04 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
综治目标管理责任书
2015/05/11 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python
zabbix如何添加监控主机和自定义监控项
2022/08/14 Servers