通过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 浮点数运算 精度问题
Oct 06 Javascript
jQuery的链式调用浅析
Dec 03 Javascript
javascript日期转换 时间戳转日期格式
Nov 05 Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 Javascript
JS设置cookie、读取cookie
Feb 24 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 Javascript
深入理解Vue 单向数据流的原理
Nov 09 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
JavaScript栈和队列相关操作与实现方法详解
Dec 07 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
thinkphp实现like模糊查询实例
2014/10/29 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
JavaScript实现轮播图效果
2020/10/30 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
python Django连接MySQL数据库做增删改查
2013/11/07 Python
python解析模块(ConfigParser)使用方法
2013/12/10 Python
Python操作sqlite3快速、安全插入数据(防注入)的实例
2014/04/26 Python
Python计算程序运行时间的方法
2014/12/13 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
python3字符串输出常见面试题总结
2020/12/01 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
如何用Python徒手写线性回归
2021/01/25 Python
表达自我的市场:Society6
2018/08/01 全球购物
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
学生安全教育材料
2014/02/14 职场文书
公司营业员的自我评价
2014/03/04 职场文书
批评与自我批评总结
2014/10/17 职场文书
2014年关工委工作总结
2014/11/17 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS