详解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获取GridView中行数据的两种方法 分享
Jul 13 Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 Javascript
JavaScript中eval()函数用法详解
Dec 14 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
在vue-cli中引入lodash.js并使用详解
Nov 13 Javascript
Vue数据双向绑定底层实现原理
Nov 22 Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
配置一个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
用libtemplate实现静态网页生成
2006/10/09 PHP
PHP实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
理解Javascript_09_Function与Object
2010/10/16 Javascript
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
js重写方法的简单实现
2016/07/10 Javascript
js 作用域和变量详解
2017/02/16 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
部队万能检讨书
2014/02/20 职场文书
python中的装饰器该如何使用
2021/06/18 Python