通过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 相关文章推荐
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 Javascript
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
javascript的正则匹配方法学习
Feb 24 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
Dec 29 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
JavaScript函数IIFE使用详解
Oct 21 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代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
php之CodeIgniter学习笔记
2013/06/17 PHP
PHP云打印类完整示例
2016/10/15 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
js类中的公有变量和私有变量
2008/07/24 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
Vue.js每天必学之表单控件绑定
2016/09/05 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
python实现百度语音识别api
2018/04/10 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
python微元法计算函数曲线长度的方法
2018/11/08 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
python中dict()的高级用法实现
2019/11/13 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
大学生怎样进行自我评价
2013/12/07 职场文书
十佳大学生村官事迹
2014/01/09 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
孩子教育的心得体会
2014/09/01 职场文书
2014年人事科工作总结
2014/11/19 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
加薪通知
2015/04/25 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
钱学森电影观后感
2015/06/04 职场文书
摘录式读书笔记
2015/07/01 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
什么是SOLID
2022/03/24 Javascript
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang