如何判断用户设备-window.screen.width方式

背景:

楼主最近碰到一个移动端适配的离奇bug:

当前判断是否是移动端的方式是 浏览器api - navigator.userAgent

js 复制代码
// 是否是移动端
function isMobileDevice() {
   return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera >Mini/i.test(navigator.userAgent);
}

但在华为matepad 一开始被识别为移动端,刷新变为了pc端。而客户希望按照pc端,非移动端显示。

楼主实测发现在小米pad,vivopad,ipad上能稳定识别为非移动端,手机设备识别为移动端。

推测可能是matepad的navigator.userAgent 可能满足了上述条件,导致被识别为移动端。而刷新又变为pc端,可能是鸿蒙系统有bug。

由于条件限制,无法通过测试获知matepad的navigator.userAgent。因此寻求另一种判断移动设备的方式。

通过查询资料获知window.screen.width的方式(鸣谢阮一峰- JavaScript 侦测手机浏览器的五种方法

介绍window.screen.width

通过屏幕宽度,判断是否为手机

arduino 复制代码
if (window.screen.width < 500) {
  // 当前设备是移动设备 
}

引用自阮一峰- JavaScript 侦测手机浏览器的五种方法

疑问

关于window.screen.width api,MDN介绍很简单,只说明了是屏幕的宽度。阮一峰的文章能看到单位为像素。但我们常常看到的手机的屏幕像素是类似 2796 x 1290 px (iphone 14pro max)。 matepad的屏幕像素为:2560×1600。那以什么阈值区分平板和手机呢?这里再卖个关子,当打开浏览器的移动端调试,顶部的数字430*932又是什么含义呢?

疑问解答

window.screen.width 返回的是逻辑像素(CSS 像素),而非物理像素。高分辨率手机(如 Retina 屏)会通过 DPR(设备像素比Device Pixel Ratio, DPR) 对 CSS 像素进行缩放。

那么要计算某款手机的 window.screen.width,就需要考虑 设备物理分辨率设备像素比 。具体计算公式如下:

ini 复制代码
window.screen.width = 物理水平分辨率 / 设备像素比(DPR

以iPhone 14 pro max为例:

  • 物理分辨率:2796 x 1290 px

  • 设备像素比(DPR) :3

  • 计算 window.screen.width

    arduino 复制代码
    window.screen.width = 1290 / 3 = 430 // 单位是 CSS 像素。与截图一致

平板计算方式亦是如此。

其他说明:

  • 若切换横屏。window.screen.width会发生变化,宽高切换。
  • 通常window.screen.width<768 时,判断为手机端(当然可根据需要修改)
相关推荐
蛋黄蛋黄1 分钟前
微信表情怎么在自己的项目使用微信表情?-> [开源仓库]wechat-emoji
前端·github
汪子熙2 分钟前
错误剖析:net::ERR_HTTP2_PROTOCOL_ERROR 200 (OK) 的含义与解决之道
前端
猩猩程序员4 分钟前
Rust 1.88 稳定支持裸函数:更安全简洁的汇编函数写法
前端
艾克马斯奎普特5 分钟前
为什么响应性语法糖最终被废弃了?尤雨溪也曾经试图让你不用写 .value
前端·vue.js·代码规范
qiyue775 分钟前
AI编程专栏(一)- 评估AI编程工具对编程语言支持情况
前端·ai编程
多啦C梦a8 分钟前
React Hooks 编程:`useState` 和 `useEffect`,再不懂就OUT了!
前端·javascript
bo521009 分钟前
解决跨域的几种种方法, 你都知道几种?
前端·面试·浏览器
拾光拾趣录9 分钟前
无状态协议下的用户状态管理:Web应用如何保持用户登录态
前端·http·https
架构个驾驾12 分钟前
用vue3,从0到1搭建一个移动端的项目(一)
前端