通过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 29 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
JavaScript模拟实现自由落体效果
Aug 28 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Oct 25 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 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
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
PHP与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
Javascript 二维数组
2009/11/26 Javascript
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
2014/05/08 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
[40:55]Liquid vs LGD 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
详解python进行mp3格式判断
2016/12/23 Python
python logging日志模块的详解
2017/10/29 Python
python flask中静态文件的管理方法
2018/03/20 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
《商鞅南门立木》教学反思
2014/02/16 职场文书
会计核算科岗位职责
2014/03/19 职场文书
财务负责人任命书
2014/06/06 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书