JavaScript 侦测手机浏览器的五种方法
一、navigator.userAgent
最简单的方法就是分析浏览器的 user agent 字符串,它包含了设备信息。
JS 通过navigator.userAgent属性拿到这个字符串,只要里面包含mobi、android、iphone等关键字,就可以认定是移动设备。
if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
// 当前设备是移动设备
}
// 另一种写法
if (
navigator.userAgent.match(/Mobi/i) ||
navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/iPhone/i)
) {
// 当前设备是移动设备
}
这种方法的优点是简单方便,缺点是不可靠,因为用户可以修改这个字符串,让手机浏览器伪装成桌面浏览器。
Chromium 系的浏览器,还有一个navigator.userAgentData属性,也是类似的作用。不同之处是它将 user agent 字符串解析为一个对象,该对象的mobile属性,返回一个布尔值,表示用户是否使用移动设备。前端培训
const isMobile = navigator.userAgentData.mobile;
注意,苹果的 Safari 浏览器和 Firefox 浏览器都不支持这个属性,具体情况可以查看 Caniuse 网站。
此外,还有一个已经废除的navigator.platform属性,所有浏览器都支持,所以也可以用。它返回一个字符串,表示用户的操作系统。
if (/Android|iPhone|iPad|iPod/i.test(navigator.platform)) {
// 当前设备是移动设备
}
二、window.screen,window.innerWidth
另一种方法是通过屏幕宽度,判断是否为手机。
window.screen对象返回用户设备的屏幕信息,该对象的width属性是屏幕宽度(单位为像素)。
if (window.screen.width < 500) {
// 当前设备是移动设备
}
上面示例中,如果屏幕宽度window.screen.width小于500像素,就认为是手机。
这个方法的缺点在于,如果手机横屏使用,就识别不了。
另一个属性window.innerWidth返回浏览器窗口里面的网页可见部分的宽度,比较适合指定网页在不同宽度下的样式。
const getBrowserWidth = function() {
if (window.innerWidth < 768) {
return "xs";
} else if (window.innerWidth < 991) {
return "sm";
} else if (window.innerWidth < 1199) {
return "md";
} else {
return "lg";
}
}
三、window.orientation
第三种方法是侦测屏幕方向,手机屏幕可以随时改变方向(横屏或竖屏),桌面设备做不到。
window.orientation属性用于获取屏幕的当前方向,只有移动设备才有这个属性,桌面设备会返回undefined。
if (typeof window.orientation !== 'undefined') {
// 当前设备是移动设备
}
注意,iPhone 的 Safari 浏览器不支持该属性。
四、touch 事件
第四种方法是,手机浏览器的 DOM 元素可以通过ontouchstart属性,为touch事件指定监听函数。桌面设备没有这个属性。
function isMobile() {
return ('ontouchstart' in document.documentElement);
}
// 另一种写法
function isMobile() {
try {
document.createEvent("TouchEvent"); return true;
} catch(e) {
return false;
}
}
五、window.matchMedia()
最后一种方法是结合 CSS 来判断。
CSS 通过 media query(媒介查询)为网页指定响应式样式。如果某个针对手机的 media query 语句生效了,就可以认为当前设备是移动设备。
window.matchMedia()方法接受一个 CSS 的 media query 语句作为参数,判断这个语句是否生效。
let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
1.
2.
上面示例中,window.matchMedia()的参数是一个 CSS 查询语句,表示只对屏幕宽度不超过 700 像素的设备生效。它返回一个对象,该对象的matches属性是一个布尔值。如果是true,就表示查询生效,当前设备是手机。
除了通过屏幕宽度判断,还可以通过指针的精确性判断。
let isMobile = window.matchMedia("(pointer:coarse)").matches;
1.
2.
上面示例中,CSS 语句pointer:coarse表示当前设备的指针是不精确的。由于手机不支持鼠标,只支持触摸,所以符合这个条件。
有些设备支持多种指针,比如同时支持鼠标和触摸。pointer:coarse只用来判断主指针,此外还有一个any-pointer命令判断所有指针。
let isMobile = window.matchMedia("(any-pointer:coarse)").matches;
1.
2.
上面示例中,any-pointer:coarse表示所有指针里面,只要有一个指针是不精确的,就符合查询条件。
六、工具包
除了上面这些方法,也可以使用别人写好的工具包。这里推荐 react-device-detect,它支持多种粒度的设备侦测。
登录后复制
import {isMobile} from 'react-device-detect';
if (isMobile) {
// 当前设备是移动设备
}
JavaScript 侦测手机浏览器的五种方法相关推荐
- JavaScript 实现网页截屏五种方法
JavaScript 实现网页截屏五种方法 最近研究了下如何利用JavaScript实现网页截屏,包括在浏览器运行的JS,以及在后台运行的nodeJs的方法.主要看了以下几个: PhantomJS P ...
- html 自动跳转手机版,HTML实现页面自动跳转的五种方法
在上篇文章给大家介绍了HTML页面3秒后自动跳转的三种常见方法,本文继续给大家介绍有关html页面跳转相关知识,一起学习吧. 下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同 ...
- C#后台调用前台javascript的五种方法
第一种,OnClientClick (vs2003不支持这个方法) <asp:Button ID="Button1" runat="server" ...
- 手机断触怎么办_手机触摸屏失灵了怎么办,五种方法自己就能修好它!
点击"蓝字"关注我们 ○ ○ 做 优 品 · 创 名 品 欧仕极 手机触摸屏常见问题排查 01 触摸屏断触 我们在点击某个图标时,正常情况下,手机会有所反应(一般按键底色变灰),反 ...
- 实现IE6、IE7、IE8多版本浏览器共存的五种方法
转自:http://developer.51cto.com/art/201008/220737.htm 你对实现IE6.IE7.IE8多版本浏览器共存的五种方法是否了解,这里和大家分享一下,相信本文介 ...
- JavaScript 数组遍历的五种方法(转)
转自:JavaScript 数组遍历的五种方法 这篇文章主要介绍了JavaScript 数组遍历的五种方法,帮助大家更好的理解和学习使用JavaScript,感兴趣的朋友可以了解下 在使用 JavaS ...
- JavaScript数组去重的五种方法
JavaScript数组去重的五种方法 先简单准备一个数组,用于方法的实验: let array = [1,1,2,3,4,4,1,5,6,6,7,7,7]; console.log(`去重前的数组: ...
- element 手机适配_解决手机移动端适配的五种方法
移动端适配的五种方法 所谓移动端适配,就是WebApp在不同尺寸的屏幕上等比显示 第一种方法:viewport适配 原理:通过设置 initial-scale , 将所有设备布局视口的宽度调整为设计图 ...
- php判断电脑浏览器模拟手机访问网页,在PC上测试移动端网站和模拟手机浏览器的5大方法...
查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法,测试环境winxp. 一.Chrome*浏览器 chrome模 ...
最新文章
- vue2.0 + vux (五)api接口封装 及 首页 轮播图制作
- PyTorch cat
- select * from mys where id=2;
- 剑指Offer(Java实现)扑克牌顺子
- android详细解释键盘和鼠标事件
- 程序员疫苗:代码注入
- java modbus通讯协议_Modbus通 讯 协 议
- 使用.net的Cache框架快速实现Cache操作
- gogs 创建新的仓库
- 单片机技术及应用:基于proteus仿真的c语言程序设计,《单片机的C语言程序设计与应用——基于Proteus仿真(第3版)》怎么样_目录_pdf在线阅读 - 课课家教育...
- 必应每日一图php,轻量必应每日一图HTML源码
- 影子卫士中文注册版+系统保护的尚方宝剑、、
- 天地图API搜索。定位等
- 备份和还原Windows DHCP服务器
- 线代 [7]|实对称矩阵
- 物联卡Iccid号码编码规则
- 郭炜-C语言程序设计-程序设计与算法(一)-第一周
- [转载] 七龙珠第一部——第119话 能成功吗 传说的魔封波
- 修改tp-wr841n-v8的flash
- 简单设置 Amazon CloudFront
热门文章
- python怎么变大字体_python – 更改字体大小而不会弄乱Tkinter按钮大小
- 2020东华大学计算机硕士,东华大学2020年全日制专硕MPAcc/ MEM/MF/MIB接收推荐免试硕士生预申请...
- 赶在元旦前夕!10分钟用Python批量定制化发送元旦祝福邮件!
- 电子计算机课文五年级上册,新型玻璃(人教版语文五年级上册课文)_百度百科...
- linux下crossover打开软件,CrossOver for Linux
- 计算机xp用户丢失,如何找回xp系统丢失的硬盘空间?
- “小说列表模块”前端代码官方评审「在线实习·推推」
- Ubuntu rocm 安装
- aria2 加速百度网盘下载
- 怀旧服野外pvp最多的服务器,为了荣誉不当人啦,WOW怀旧服几个适合野外PVP刷荣誉的地点...