如何判断页面是通过PC端还是移动端访问?
一、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;
上面示例中,window.matchMedia()
的参数是一个 CSS 查询语句,表示只对屏幕宽度不超过 700 像素的设备生效。它返回一个对象,该对象的matches
属性是一个布尔值。如果是true
,就表示查询生效,当前设备是手机。
除了通过屏幕宽度判断,还可以通过指针的精确性判断。
let isMobile = window.matchMedia("(pointer:coarse)").matches;
上面示例中,CSS 语句pointer:coarse
表示当前设备的指针是不精确的。由于手机不支持鼠标,只支持触摸,所以符合这个条件。
有些设备支持多种指针,比如同时支持鼠标和触摸。pointer:coarse
只用来判断主指针,此外还有一个any-pointer
命令判断所有指针。
let isMobile = window.matchMedia("(any-pointer:coarse)").matches;
上面示例中,any-pointer:coarse
表示所有指针里面,只要有一个指针是不精确的,就符合查询条件。
六、工具包
除了上面这些方法,也可以使用别人写好的工具包。这里推荐 react-device-detect,它支持多种粒度的设备侦测。
import {isMobile} from 'react-device-detect';if (isMobile) {// 当前设备是移动设备
}
如何判断页面是通过PC端还是移动端访问?相关推荐
- JS判断页面是在pc端还是移动端打开方法
好久没复习js了,今天正好之前的项目要重新写一套移动端的代码,之前的没有做移动端的兼容,故将遇到的问题写在上面: 在移动设备应用越来越广泛的今天,许多网站都开始做移动端的界面展示,两者屏幕尺寸差异很大 ...
- php代码判断pc端和移动端页面跳转,js判断PC端与移动端跳转
在网上看到很多这样类似的代码,但是有的很复杂,或者有的没有判断完全,上次经理去见完客户回来讲,使用苹果浏览打开pc端(pc已经做了识别跳转)会自动跳转到移动端的网页去,后来经测试才发现 documen ...
- html页面判断是手机端访问,JS 判断手机端和pc端后跳转对应页面
判断手机端和pc端 (function () { var sUserAgent = navigator.userAgent; if (sUserAgent.indexOf('Android') > ...
- 判断设备访问类型是PC端还是WAP端
在开发项目中,可能经常会用到.判断用户访问的是PC还是手持设备,如果是手持设备自动访问wap地址. 方法一: JavaScript var browser={ versions:function(){ ...
- js判断客户端是PC端还是移动端访问
js判断客户端是PC端还是移动端访问 方法一 (推荐) function IsPC(){ var userAgentInfo = navigator.userAgent;var Agents = ne ...
- js判断PC端或是移动端、判断是不是微信浏览器、js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本
** js判断PC端或是移动端 ** 第一种 window.location.href = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator ...
- js如何判断用户是在pc端和还是移动端访问
js如何判断用户是在pc端和还是移动端访问 来源:A5技术交流 作者:wofa 时间:2014-04-25收藏本页 最近一直在忙我们团队的项目"咖啡之翼",在这个项目中,我们为移动 ...
- js判断客户端是pc端还是移动端
Js判断客户端是否为PC还是手持移动设备 方法一 function IsPC(){ var userAgentInfo = navigator.userAgent;var Agents = new A ...
- javascript 判断 前端 是 pc端 还是 移动端
javascript 判断 前端 是 pc端 还是 移动端 <!DOCTYPE html> <html lang="en"> <head>< ...
最新文章
- Dictionary作为数据源绑定,调用c++库中返回为BYTE*的函数,listView项排序
- 安卓samba软件_Android Samba Client
- sklearn.preprocessing.PolynomialFeatures
- 关于电脑的几十个单词及其缩写
- python renamer模块_Python - 批量文件重命名
- java吃货联盟app讲解_吃货联盟订餐系统——JAVA实现
- 【Tensorflow】tf.nn.depthwise_conv2d如何实现深度卷积?+深度可分离卷积详解
- 2022电工杯AB题思路分析
- 【已解决】最新版本的Chrome浏览器如何设置网页编码
- html怎么给表头加斜线,如何为Excel中的表格表头添加斜线和文字?这才是正确的添加方式-excel表格斜线...
- Birds in Forest
- 美团算法 SP | 三面复盘
- Goland导入github包
- 前端证券项目_头条猿辅导瓜子老虎证券等前端面经
- 【GUI】Python图形界面(一)
- 虹软人脸识别 - 采用数据库存取人脸特征数据
- solidworks迈迪设计宝_咸宁市宝雅雅贝前大灯尺寸
- 汽车行业应该怎么做信息流广告?有哪些信息流平台推荐吗?
- WD My Cloud Gen2 安装第三方应用
- 读取文本文件的最后n行