通过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使用过程中需要注意的地方和一些基本语法
Aug 26 Javascript
30个精美的jQuery幻灯片效果插件和教程
Aug 23 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
javascript将数字转换整数金额大写的方法
Jan 27 Javascript
AngularJS利用Controller完成URL跳转
Aug 09 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
Vue多种方法实现表头和首列固定的示例代码
Feb 02 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
React中使用Vditor自定义图片详解
Dec 25 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下10件你也许并不了解的事情
2008/09/11 PHP
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
2014/03/19 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
python实现随机森林random forest的原理及方法
2017/12/21 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
详解python解压压缩包的五种方法
2019/07/05 Python
Django model update的多种用法介绍
2020/03/28 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
法院实习人员自我鉴定
2013/09/26 职场文书
开学典礼主持词
2014/03/19 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
团队拓展训练心得体会
2016/01/12 职场文书
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android