通过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 相关文章推荐
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
详解JavaScript对象类型
Jun 16 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 Javascript
JS操作json对象key、value的常用方法分析
Oct 29 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 Javascript
Vue中nprogress页面加载进度条的方法实现
Nov 13 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正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
JavaScript中创建字典对象(dictionary)实例
2015/03/31 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
简述JS控制台的使用
2018/07/15 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
用js编写留言板
2020/03/17 Javascript
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
Python使用Pandas对csv文件进行数据处理的方法
2019/08/01 Python
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
STP的判定过程
2012/10/01 面试题
办公室文秘自我鉴定
2013/09/21 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
初中重阳节活动总结
2015/05/05 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技