通过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 新手24条实用建议[TUTS+]
Jun 21 Javascript
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
angular第三方包开发整理(小结)
Apr 19 Javascript
微信小程序 自定义复选框实现代码实例
Sep 04 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
JavaScript原型链中函数和对象的理解
Jun 16 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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
PHP 存取 MySQL 数据库的一个例子
2006/10/09 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
PHP中比较时间大小实例
2014/08/21 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
python生成式的send()方法(详解)
2017/05/08 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
使用Python爬了4400条淘宝商品数据,竟发现了这些“潜规则”
2018/03/23 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
Python关于反射的实例代码分享
2020/02/20 Python
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
淘宝好评语大全
2014/05/05 职场文书
南湾猴岛导游词
2015/02/09 职场文书
七一慰问简报
2015/07/20 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python