通过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 ajax学习笔记2 使用XMLHttpRequest对象的responseXML
Oct 16 Javascript
node.js中的http.createClient方法使用说明
Dec 15 Javascript
jQuery中click事件的定义和用法
Dec 20 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
在layui中select更改后生效的方法
Sep 05 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 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
Views rows style模板重写代码
2011/05/16 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
斜45度寻路实现函数
2009/08/20 Javascript
javascript 获取表单file全路径
2009/12/31 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
python实现备份目录的方法
2015/08/03 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
解决python升级引起的pip执行错误的问题
2018/06/12 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
Html5与App的通讯方式详解
2019/10/24 HTML / CSS
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
公务员个人自我评价分享
2013/11/06 职场文书
个人近期表现材料
2014/02/11 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
税务会计岗位职责
2015/04/02 职场文书
化妆品促销活动总结
2015/05/07 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android