锤子手机HTML5适配关键在于规避Smartisan OS的WebView老旧、UA伪装及非标处理：viewport需完整声明；touch事件要防延迟并避免伪ontouchstart判断；rem布局须JS动态计算；快应用容器中localStorage可能失效。
锤子手机（尤其是坚果系列）本质是安卓设备，HTML5 页面无需特殊“锤子专属适配”——它不识别厂商标签，只认标准 Web API 和 CSS 渲染规则。真正要做的，是规避锤子系统（Smartisan OS）中 WebView 内核老旧、UA 伪装、以及部分定制浏览器对 viewport 或 touch 事件的非标处理。
viewport 设置必须严格且完整
锤子早期机型（如坚果 Pro 1/2，搭载 Android 7–8）常使用旧版 Chromium WebView（53–63），对不完整 解析不稳定，容易触发强制缩放或横向滚动条。
- ❌ 错误写法：
（缺initial-scale，部分锤子浏览器会默认按 980px 渲染） - ✅ 正确写法（兼容性最强）：
- ⚠️ 注意：
target-densitydpi是已废弃的 Android 旧属性，锤子 OS 后期版本（Smartisan OS 7+）反而可能因识别该字段而降级渲染，一律不要加
touch 事件需兼容 hammer.js 或原生 fallback
锤子浏览器（尤其 Smartisan Browser 3.x 及更早）对 touchstart/touchend 的触发有轻微延迟或冒泡异常，单纯监听 click 在某些场景下会失效（比如快速双击、滑动中点击）。
- 推荐用轻量级方案：直接监听
touchstart并preventDefault()阻止默认行为，再模拟点击逻辑 - 若用
hammer.js，务必使用 v2.0.8+ 版本（修复了在低 DPI 设备上tap事件丢失的问题） - 避免依赖
ontouchstart全局判断：锤子部分定制 ROM 会伪造'ontouchstart' in window为true，但实际不触发事件 → 应改用matchMedia('(hover: none) and (pointer: coarse)')检测触控环境
字体与 rem 布局慎用固定基准换算
坚果系列屏幕物理像素密度差异大（如坚果 R1 是 401 ppi，坚果 Pro 3 是 403 ppi，但系统上报的 window.devicePixelRatio 在某些固件里会四舍五入成 2 或 3，而非真实值），导致基于 750px 设计稿 + rem 的等比缩放出现 1–2px 偏差。
立即学习“前端免费学习笔记（深入）”；
- 不建议硬编码
html { font-size: 100px; }→ 改为 JS 动态计算：const baseWidth = 375; // 以 iPhone 6 宽度为基准（非 750！） const scale = document.documentElement.clientWidth / baseWidth; document.documentElement.style.fontSize = scale * 16 + 'px'; // 1rem = 16px 基准
- 文字层级建议用
em或vh/vw辅助微调，例如标题字号可设为font-size: clamp(1.2rem, 4vw, 1.8rem);，避免小屏文字过小、大屏溢出
最易被忽略的一点：锤子部分机型（如坚果 3）出厂预装的「快应用」容器内嵌 WebView 不支持 localStorage 的同步写入，若页面依赖本地缓存做首屏直出，需加 try/catch 并 fallback 到 sessionStorage 或内存缓存。别假设“安卓都一样”。
