通过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 相关文章推荐
js实现的常用的左侧导航效果
Oct 17 Javascript
js获得页面的高度和宽度的方法
Feb 23 Javascript
javascript实现拖放效果
Dec 16 Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
基于angular实现三级联动的生日插件
May 12 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
LayUI表格批量删除方法
Aug 15 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
这应该是最详细的响应式系统讲解了
Jul 22 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
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测试程序运行时间的类
2012/02/05 PHP
php里array_work用法实例分析
2015/07/13 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
python使用循环实现批量创建文件夹示例
2014/03/25 Python
分享一个常用的Python模拟登陆类
2015/03/29 Python
Python反射用法实例简析
2017/12/22 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
Python装饰器语法糖
2019/01/02 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
python生成器推导式用法简单示例
2019/10/08 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
Django之form组件自动校验数据实现
2020/01/14 Python
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
电子商务专业学生职业生涯规划
2014/03/07 职场文书
优秀会计求职信
2014/07/04 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
报名委托书
2015/01/29 职场文书
停电通知范文
2015/04/16 职场文书
班级管理经验交流材料
2015/11/02 职场文书
实例详解Python的进程,线程和协程
2022/03/13 Python