Nothing Phone适配关键是避开旧写法并轻量优化：必设viewport（内容页max-scale=3.0且文字≥16px），用env(safe-area-inset-bottom)预留Glyph空间，touchstart+click双监听并设passive:false，按Material You调字体行高与间距，深色模式仅响应prefers-color-scheme媒体查询。
HTML5 页面在 Nothing Phone 上能正常显示，但要真正“适配好”，关键不是加什么特殊标签，而是避开它不兼容的旧写法，并针对其屏幕特性（如 120Hz 刷新率、窄边框、透明 Glyph 界面逻辑）做轻量级优化。Nothing Phone 没有专属 HTML5 API，它用的是标准 Chromium 内核（Android WebView / Chrome），所以适配本质仍是现代移动 Web 通用实践——只是要更严格。
必须加 user-scalable=no 的副作用
Nothing Phone 默认启用系统级手势导航和全局动画，如果页面允许缩放（user-scalable=yes），用户双指缩放可能干扰 Glyph 区域的视觉节奏，也容易误触返回手势。但直接设 user-scalable=no 会禁用辅助功能（如视力障碍用户放大文字），所以推荐：
-
width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no仅用于纯操作型 H5（如扫码页、支付确认页） - 对内容型页面（新闻、表单），改用
width=device-width, initial-scale=1.0, maximum-scale=3.0，并确保文字最小为16px（避免系统强制放大破坏布局） - 别用
target-densitydpi—— 这是已废弃的 Android 旧属性，Nothing Phone 完全忽略，还可能触发 Chrome 的兼容模式警告
Glyph 区域不响应 CSS 动画，但可利用 env(safe-area-inset-bottom) 预留空间
Nothing Phone 的 Glyph 区（底部状态栏区域）是系统级 UI 层，网页内容无法绘制其上，也不支持 transform 或 animation。强行覆盖会导致闪烁或截断。正确做法是用环境变量预留安全距离：
注意：constant(safe-area-inset-bottom) 已被弃用，仅在 iOS 11.2 以下生效；Nothing Phone 只认 env()。若未生效，检查是否漏了 viewport 标签或用了 overflow: hidden 抑制了根容器滚动。
立即学习“前端免费学习笔记（深入）”；
触摸事件需同时监听 touchstart 和 click，避免 300ms 延迟失灵
Nothing Phone 的 Chromium 版本（通常为 Chrome 120+）默认启用 fastclick 机制，但某些 WebView 封装（如部分 PWA 启动器）会关闭它。只绑 click 会导致按钮点击延迟约 300ms，用户感知为“卡顿”；只绑 touchstart 则在桌面调试时失效。稳妥写法：
const btn = document.getElementById('submit');
btn.addEventListener('touchstart', handleAction, { passive: false });
btn.addEventListener('click', handleAction);
function handleAction(e) {
e.preventDefault(); // 防止重复触发
// 执行逻辑
}
关键点：{ passive: false } 必须显式声明，否则 Chrome 会静默忽略 preventDefault()，导致点击穿透到底层系统控件（比如误触 Glyph 图标）。
字体与间距按 Nothing 的 Material You 设计微调
Nothing Phone 使用定制版 Material You，强调留白与呼吸感。常见错误是沿用 PC 端紧凑排版，导致文字挤在窄屏上难以阅读。建议：
- 正文行高设为
1.6起（非1.4），段落间margin-bottom: 1.5rem - 禁用
font-smoothing: antialiased—— Nothing 的 OLED 屏对亚像素渲染不友好，反而让中文字发虚 - 图标按钮尺寸不小于
48px × 48px（符合 WCAG 触控最小尺寸），Glyph 区附近按钮额外加padding-bottom: env(safe-area-inset-bottom)
最易被忽略的一点：Nothing Phone 的深色模式是强制跟随系统，不支持 @media (prefers-color-scheme: dark) 以外的 JS 切换逻辑。如果你用 JS 手动切主题，务必监听 matchMedia('(prefers-color-scheme: dark)').addEventListener，否则夜间 Glyph 效果会错乱。
