如何判断用户设备-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 时,判断为手机端(当然可根据需要修改)
相关推荐
关羽的小刀3 分钟前
Element-UI最新版暗藏Lodash漏洞?一次真实项目安全排查记录
前端
张志鹏PHP全栈3 分钟前
Vue3第五天,ref 和 reactive的介绍和区别
前端·vue.js
郭邯5 分钟前
import.meta对象是什么?
前端
用泥种荷花21 分钟前
【NPM 笔记(一)】NPM 入门知识:命令、依赖与脚本核心
前端
大巨头22 分钟前
在vscode中使用通义灵码插件记录分享
前端
江城开朗的豌豆24 分钟前
Vue/React凭什么吊打传统前端?6年老司机带你揭秘它们的性能杀招!
前端·javascript·vue.js
江城开朗的豌豆25 分钟前
虚拟DOM:为什么React/Vue比直接操作DOM快10倍?
前端·javascript·vue.js
mrsk26 分钟前
JavaScript中的大数相加是怎么突破数字的极限的?
前端·javascript·面试
mrsk26 分钟前
JavaScript作用域:变量的「地盘」之争
前端·javascript·面试
北京_宏哥26 分钟前
《刚刚问世》系列初窥篇-Java+Playwright自动化测试-27- 操作单选和多选按钮 - 上篇(详细教程)
java·前端·面试