通过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 相关文章推荐
通过javascript的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
动态加载jQuery的方法
Jun 16 Javascript
jQuery动态生成Bootstrap表格
Nov 01 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
Node.js实现文件上传的示例
Jun 28 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 Javascript
Vue防止白屏添加首屏动画的实例
Oct 31 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
在任意字符集下正常显示网页的方法一
2007/04/01 PHP
PHP使用PHPMailer发送邮件的简单使用方法
2013/11/12 PHP
PHP随机生成随机个数的字母组合示例
2014/01/14 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
php7下的filesize函数
2019/09/30 PHP
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
Javascript中神奇的this
2016/01/20 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
vue通过过滤器实现数据格式化
2020/07/20 Javascript
js实现查询商品案例
2020/07/22 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
python安装oracle扩展及数据库连接方法
2017/02/21 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
python爬取youtube视频的示例代码
2021/03/03 Python
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
商务英语专业自荐信
2013/10/14 职场文书
安全检查验收制度
2014/01/12 职场文书
表彰先进的通报
2014/01/31 职场文书
数学系毕业生求职信
2014/05/29 职场文书
体育馆的标语
2014/06/24 职场文书
管理岗位竞聘演讲稿
2014/08/18 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL