isMobileDevice / getDeviceInfo

isMobileDevice 方法用于检测当前是否为移动设备，综合使用 User-Agent、屏幕尺寸和触摸支持进行判断。getDeviceInfo 方法返回包含设备类型、子类型、屏幕尺寸、像素比等信息的详细对象，便于进行更精细的设备适配。

语法

javascript

isMobileDevice()
getDeviceInfo()

参数

两个方法均无参数。

返回值

isMobileDevice boolean

返回 true 表示当前为移动设备，false 表示为桌面设备。

getDeviceInfo Object

返回一个设备信息对象，包含以下字段：

字段	类型	说明
`type`	string	设备类型，可选值：`'mobile'`、`'tablet'`、`'desktop'`
`subType`	string	设备子类型，可选值：`'iphone'`、`'android'`、`'ipad'`、`'unknown'`
`screenWidth`	number	视口宽度（`window.innerWidth`）
`screenHeight`	number	视口高度（`window.innerHeight`）
`pixelRatio`	number	设备像素比（`window.devicePixelRatio`）
`userAgent`	string	浏览器 User-Agent 字符串

描述

isMobileDevice() 的判定逻辑：

检查 User-Agent 是否匹配 Mobile|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini。
检查屏幕尺寸：window.innerWidth <= 768 视为小屏。
检查触摸支持：'ontouchstart' in window 或 navigator.maxTouchPoints > 0。
检查设备像素比：window.devicePixelRatio >= 1.5 视为高 DPI。
综合判断：User-Agent 匹配，或（小屏幕且支持触摸）时返回 true。

getDeviceInfo() 的判定逻辑：

根据 User-Agent 中的 mobile、android、iphone、ipod 关键字判定为 mobile 类型，并细分 iphone、android 子类型。
根据 ipad 关键字或屏幕宽度在 (768, 1024] 区间判定为 tablet 类型，并细分 ipad 子类型。
其余判定为 desktop 类型；若桌面设备屏幕宽度 <= 768，则调整为 mobile。
返回的对象同时包含屏幕尺寸、像素比和原始 User-Agent 字符串，便于进一步处理。

注意事项

User-Agent 检测并非绝对可靠，用户可通过浏览器扩展或开发者工具伪造 User-Agent。
部分平板设备（如 iPad）的 User-Agent 可能与桌面浏览器相似，函数已通过屏幕尺寸进行辅助判断。
isMobileDevice 和 getDeviceInfo 仅反映调用时的设备状态，窗口大小变化后不会自动更新，需重新调用。
函数返回结果建议作为 UI 适配的参考依据，不应作为安全或权限控制的唯一依据。
部分浏览器的隐私模式可能限制 navigator.maxTouchPoints 等属性的访问。

示例

检测移动设备

获取设备详情

响应式适配示例

浏览器兼容性

isMobileDevice 和 getDeviceInfo 依赖以下浏览器 API：

navigator.userAgent：所有浏览器均支持。
window.innerWidth / window.innerHeight：所有现代浏览器及 IE9+ 支持。
navigator.maxTouchPoints：IE10+、Chrome、Firefox、Safari 支持。
'ontouchstart' in window：所有现代浏览器支持。
window.devicePixelRatio：IE11+、所有现代浏览器支持。

整体兼容性良好，可覆盖绝大多数使用场景。

性能考虑

时间复杂度: O(1) - 仅通过正则匹配和直接访问浏览器属性完成判断，无循环操作。
性能开销: 极低，可在页面初始化或路由切换时频繁调用。
正则匹配: 内部使用简单的正则表达式，编译后匹配速度很快。

isMobileDevice / getDeviceInfo ​

语法 ​

参数 ​

返回值 ​

描述 ​

注意事项 ​

示例 ​

检测移动设备 ​

获取设备详情 ​

响应式适配示例 ​

浏览器兼容性 ​

性能考虑 ​

相关函数 ​