详解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开发者都需要知道的5个小技巧
Jan 08 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
原生js+css调节音量滑块
Jan 15 Javascript
JavaScript实现密码强度实时验证
Mar 18 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
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
载入进度条 效果
2006/07/08 Javascript
围观tangram js库
2010/12/28 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
2013/08/05 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
js实现批量删除功能
2020/08/27 Javascript
使用Python的判断语句模拟三目运算
2015/04/24 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
Python用for循环实现九九乘法表
2018/05/31 Python
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
linux比较文件内容的命令是什么
2013/03/04 面试题
英语师范专业毕业生自荐信
2013/09/21 职场文书
党员党性分析材料
2014/02/17 职场文书
共青团员自我评价
2015/03/10 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
开学典礼致辞
2015/07/29 职场文书
学会感恩主题班会
2015/08/12 职场文书
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL