通过JS判断网页是否为手机打开


Posted in Javascript onOctober 28, 2020

参考一:

//返回true表示为pc端打开,返回false表示为手机端打开
function check() { 
 var userAgentInfo=navigator.userAgent; 
 var Agents =new Array("Android","iPhone","SymbianOS","Windows Phone","iPad","iPod"); 
 var flag=true; 
 for(var v=0;v<Agents.length;v++) { 
   if(userAgentInfo.indexOf(Agents[v])>0) { 
    flag=false; 
    break; 
   } 
  } 
  return flag; 
 }

参考二:

简单的利用 JS 来判断页面是在手机端还是在 PC 端打开的方法(转)

在移动设备应用越来越广泛的今天,许多网站都开始做移动端的界面展示,两者屏幕尺寸差异很大,所以展示的内容也有所差别。于是就遇到一个问题,如何判断你的页面是在移动端还是在PC端打开的,很简单的问题,那我们就简单点来说,以我们公司的官网来说,PC端和移动端的官网界面分别如下:

通过JS判断网页是否为手机打开

PC

通过JS判断网页是否为手机打开

手机

Navigator对象

首先来了解一下Navigator 对象,Navigator 对象包含有关浏览器的信息,下面的userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值。所以我们可以通过判断navigator.useragent里面是否有某些值来判断,比如我的电脑是mac,所以打印出来的值为

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

具体含义不解释,有兴趣同学自行百度,可以看到里面含有 Mac 字样,其他的也是类似的。

那如何判断页面是在移动端还是PC端打开的呢?

网上有很多方法,写的或难或简单,实际上一行代码就够了

window.location.href = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) ? "https://www.baidu.com/" : http://news.baidu.com/;

以上代码利用了 正则表达式 和 三目运算符,含义就是如果是移动端打开的话那就跳转到 https://www.baidu.com/,如果不是就跳转到 http://new.baidu.com/,这个看不懂的话,那我下面这样写就很容易理解了吧

if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
  window.location.href = "https://www.baidu.com/";
} else {
  window.location.href = "http://news.baidu.com/";
}

什么?if 里面的判断还是看不懂?实际上就是利用正则去判断 navigator.useragent 是否含有 Android/webOs/iphone 等字符串,并且利用修饰符 " i " 做了不区分大小写,然后用正则的方法 test 去判断是否满足,如果这种方式不理解的话完全可以利用字符串的 indexOf 方法去判断。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery validate使用攻略 第四步
Jul 01 Javascript
基于jquery的表格排序
Sep 11 Javascript
JavaScript之HTMLCollection接口代码
Apr 27 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
May 27 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
vue实现绑定事件的方法实例代码详解
Jun 20 Javascript
js+css3实现简单时钟特效
Sep 13 Javascript
使用Ajax实现无刷新上传文件
Apr 12 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 #Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
Oct 28 #Javascript
ant design vue中表格指定格式渲染方式
Oct 28 #Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 #Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 #Javascript
微信小程序picker组件两列关联使用方式
Oct 27 #Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 #Javascript
You might like
php打包网站并在线压缩为zip
2016/02/13 PHP
php封装的验证码类分享
2017/02/26 PHP
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
类似于QQ的右滑删除效果的实现方法
2016/10/16 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
使用JavaScript获取URL中的参数(两种方法)
2016/11/16 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
JS实现的缓冲运动效果示例
2018/04/30 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python中的引用和拷贝浅析
2014/11/22 Python
python实现用户登录系统
2016/05/21 Python
Python制作刷网页流量工具
2017/04/23 Python
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
python实现决策树分类
2018/08/30 Python
python写入文件自动换行问题的方法
2019/07/05 Python
Python 3 判断2个字典相同
2019/08/06 Python
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
在求职信中如何凸显个人优势
2013/10/30 职场文书
统计员岗位职责
2013/11/14 职场文书
资料员岗位职责
2013/11/17 职场文书
护士实习鉴定范文
2013/12/22 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
安全隐患整改报告
2014/11/06 职场文书
2015年校长新年寄语
2014/12/08 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
车间质检员岗位职责
2015/04/08 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
JavaScript的function函数详细介绍
2021/11/20 Javascript