通过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 相关文章推荐
一些mootools的学习资源
Feb 07 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
Mar 19 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
javascript break指定标签打破多层循环示例
Jan 20 Javascript
jquery控制display属性为none或block
Mar 31 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 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网站地图生成类示例
2014/01/13 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
JQuery 学习技巧总结
2010/05/21 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
vue各种事件监听实例(小结)
2020/06/24 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法
2018/02/03 Python
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
高二英语教学反思
2014/01/19 职场文书
活动策划求职信模板
2014/04/21 职场文书
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
幼儿园工作总结2015
2015/04/01 职场文书
歌咏比赛主持词
2015/06/29 职场文书
《跨越海峡的生命桥》教学反思
2016/02/18 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python
asyncio异步编程之Task对象详解
2022/03/13 Python
mysql中关键词exists的用法实例详解
2022/06/10 MySQL
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL