如何判断用户设备-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 时，判断为手机端（当然可根据需要修改）