AGM 三防手机 HTML5 适配核心是 viewport 精准配置与 touch 事件修复。需设置 user-scalable=no、max/min-scale= 1 及 target-densitydpi；touch 事件须设 touch-action:manipulation、preventDefault()并避免 passive；Canvas 需按 screen.width/window.innerWidth 计算 DPR 并 scale 渲染。
AGM 三防手机的 HTML5 适配核心是 viewport 和 touch 事件支持
AGM 系列三防手机（如 AGM G1、G2、H2、X 系列）大多运行 Android 8–12，WebView 基于 Chromium 内核（但版本常滞后），默认禁用部分现代 API。直接套用通用响应式模板大概率出现缩放异常、点击延迟、Canvas 渲染模糊或 touchstart 不触发等问题。关键不是“加个 meta”，而是针对性补全底层能力。
必须设置的 viewport 配置与常见失效原因
AGM 手机对 viewport 的解析较严格，尤其在横屏切换或系统字体放大后容易重置缩放。仅写 不够。
- 强制禁用用户缩放，避免误触放大：添加
user-scalable=no（AGM 系统级手势可能干扰双指缩放逻辑） - 明确指定
maximum-scale=1和minimum-scale=1，防止系统 UI 覆盖导致 viewport 重计算 - 某些 AGM 机型（如 H2 Pro）需额外加
target-densitydpi=device-dpi（仅限旧版 Android WebView，Chrome 50+ 已废弃，但 AGM 自研 WebView 仍依赖它）
touch 事件失效或延迟的修复方法
AGM 手机普遍存在 click 事件 300ms 延迟，且部分型号（如 X6）的 touchstart 在 Canvas 或 绝对定位 元素上完全不触发——这不是代码问题，是系统 WebView 对 touch-action 的默认值处理异常。
- 全局禁用默认 touch 行为：给
加style="touch-action: manipulation;"（比none更安全，保留滚动） - 对 Canvas、按钮等交互区域显式设置
touch-action: none，否则 AGM WebView 可能忽略其上的touchmove - 避免监听
touchend判定点击，改用touchstart+preventDefault()+ 定时器模拟 click，兼容性更稳
document.addEventListener('touchstart', function(e) {if (e.target.tagName === 'CANVAS' || e.target.classList.contains('btn')) {e.preventDefault(); } }, {passive: false});Canvas 渲染模糊与 DPR 适配陷阱
AGM 多数机型物理像素密度（DPR）为 2 或 3，但部分型号（如 G1）的 window.devicePixelRatio 返回错误值（恒为 1），导致 Canvas 绘制后被 浏览器 自动缩放拉伸，文字 / 线条发虚。
立即学习 “ 前端免费学习笔记（深入）”；
- 不要只依赖
window.devicePixelRatio，优先检测screen.width / window.innerWidth作为实际 DPR - Canvas 初始化时手动设置
canvas.width和canvas.height为实际宽高 × DPR，再用 CSS 缩放到目标尺寸 - 对文字绘制，必须用
ctx.scale(dpr, dpr)配合ctx.font字号调整，否则 font 渲染仍走低 DPR 流程
const dpr = window.devicePixelRatio || (screen.width / window.innerWidth); const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); canvas.width = canvas.offsetWidth * dpr; canvas.height = canvas.offsetHeight * dpr; ctx.scale(dpr, dpr);AGM 三防手机的适配难点不在功能缺失，而在行为不一致：同一型号不同固件版本，devicePixelRatio 可能从 1 变成 2.5；同一个 touchstart 监听，在桌面 Chrome 正常，在 AGM H2 上必须加 {passive: false} 才生效。真机测试不能省，刷机包更新后务必回归验证。
