如何判断用户设备-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 时,判断为手机端(当然可根据需要修改)
相关推荐
爱编程的喵几秒前
JavaScript闭包深度解析:从作用域到实战应用
前端·javascript
雪碧聊技术1 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了1 小时前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭2 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code2 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟2 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light2 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子2 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00002 小时前
Vue组件通信方式详解
前端·面试
呆呆的心2 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html