详解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 日期对象Date扩展方法
May 30 Javascript
Javascript处理DOM元素事件实现代码
May 23 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
js转化毫秒为时间格式代码
Apr 10 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
javascript轮播图算法
Oct 21 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 Javascript
vue实现登录功能
Dec 31 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
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
jQuery表格插件datatables用法详解
2020/11/23 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
js常用DOM方法详解
2017/02/04 Javascript
关于js中的鼠标事件总结
2017/07/11 Javascript
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
Angular(5.2-&gt;6.1)升级小结
2018/12/27 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
Python第三方库的安装方法总结
2016/06/06 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
python版本单链表实现代码
2018/09/28 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
汽修专业学生自我鉴定
2013/11/16 职场文书
英语商务邀请函范文
2014/01/16 职场文书
会计电算化学生个人的自我评价
2014/02/08 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
护士个人年终总结
2015/02/13 职场文书
日本读研:怎样写好一篇日本研究计划书?
2019/07/15 职场文书
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python