HTML5提供五种方法获取手机设备信息：一、Navigator对象（userAgent、platform、vendor）；二、Screen API（宽高、方向）；三、DeviceOrientation/Motion API（传感器数据）；四、Permissions API（权限状态）；五、视口与触摸检测（innerWidth、devicePixelRatio、ontouchstart）。
如果您希望在网页中获取用户手机设备的相关信息，HTML5 提供了多种原生 API 和属性来访问设备能力与状态。以下是几种可行的方法：
一、使用 Navigator 对象获取基础设备信息
Navigator 接口提供了关于浏览器和运行环境的基本信息，包括设备平台、用户代理字符串等，可用于识别移动设备类型及操作系统。
1、通过 navigator.userAgent 获取完整用户代理字符串，从中解析设备型号、操作系统版本等信息。
2、检查 navigator.platform 值，例如返回 "iPhone"、"Android" 或 "Linux armv7l" 等，辅助判断硬件平台。
立即学习“前端免费学习笔记（深入）”；
3、使用 navigator.vendor 辅助识别浏览器内核厂商（如 "Apple Computer, Inc." 表示 Safari）。
二、使用 Screen API 获取屏幕与显示参数
Screen 接口可读取设备的物理与逻辑显示特性，适用于响应式适配与设备能力判断。
1、读取 screen.width 和 screen.height 获取设备屏幕像素宽高。
2、获取 screen.availWidth 与 screen.availHeight 得到可用显示区域尺寸（排除系统任务栏等占用空间）。
3、检查 screen.orientation.type 判断当前屏幕方向（如 "portrait-primary" 或 "landscape-secondary"）。
三、使用 DeviceOrientation 和 DeviceMotion API 获取传感器数据
这些 API 允许网页访问设备的陀螺仪、加速度计等硬件传感器，适用于需要感知物理姿态或运动的应用场景。
1、监听 window.addEventListener('deviceorientation', callback) 获取设备相对于地球坐标系的旋转角度（alpha、beta、gamma）。
2、监听 window.addEventListener('devicemotion', callback) 获取加速度（包括重力分量）和旋转速率数据。
3、注意：现代浏览器要求该类 API 必须在用户手势触发（如点击、触摸）后的上下文中启用，否则可能被拒绝访问。
四、使用 Permissions API 检查敏感设备权限状态
对于需显式授权的功能（如地理位置、摄像头），可通过 Permissions API 查询当前权限状态，间接反映设备能力支持情况。
1、调用 navigator.permissions.query({ name: 'geolocation' }) 检查定位权限是否已授予，常用于判断是否为具备 GPS 的移动设备。
2、查询 navigator.permissions.query({ name: 'camera' }) 或 navigator.permissions.query({ name: 'microphone' }) 可确认设备是否具备对应硬件并允许网页访问。
3、权限状态返回值为 "granted"、"denied" 或 "prompt"，其中 "granted" 表明设备存在该硬件且已被授权使用。
五、通过 window.innerWidth 与 window.innerHeight 判断视口尺寸与移动特性
视口尺寸是识别移动端最直接的前端手段之一，结合 CSS 媒体查询可进一步验证设备类型。
1、读取 window.innerWidth 与 window.innerHeight 获取当前可视区域宽度与高度（单位：CSS 像素）。
2、对比 window.devicePixelRatio 值（如 2 或 3），判断是否为高密度屏幕设备（常见于智能手机）。
3、检测 'ontouchstart' in window 或 navigator.maxTouchPoints > 0 来确认设备是否支持触摸操作。
