通过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 相关文章推荐
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 Javascript
BootStrap Select清除选中的状态恢复默认状态
Jun 20 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
js构造函数创建对象是否加new问题
Jan 22 Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
js实现继承的方法及优缺点总结
May 08 Javascript
JavaScript实现队列结构过程
Dec 06 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 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
浅谈angularJS中的事件
2016/07/12 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
Sanic框架应用部署方法详解
2018/07/18 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
Django实现文件上传和下载功能
2019/10/06 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
药学专业个人的自我评价
2013/12/31 职场文书
单位领导证婚词
2014/01/14 职场文书
二手车转让协议书
2015/01/29 职场文书
热血教师观后感
2015/06/10 职场文书
卫生主题班会
2015/08/14 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python