HTML5适配关键在viewport设置、CSS媒体查询和单位选择；Pixel系列需禁用用户缩放、用dvh替代vh、响应系统字体缩放、避免devicePixelRatio依赖，并处理UI层叠干扰。
HTML5 本身不决定屏幕适配效果，真正起作用的是 viewport 设置、CSS 媒体查询和单位选择。Pixel 系列（尤其是 Pixel 4–8）普遍采用高 PPI、非标准宽高比（如 19.5:9）、动态刷新率与系统级字体缩放，单纯写 标签或用 rem 不足以可靠适配。
viewport 必须显式声明且禁用用户缩放
Pixel 用户常开启「显示大小」或「字体大小」系统设置，若 user-scalable=yes 或缺失 initial-scale=1，页面会意外放大/缩小，触发横向滚动条。Google 官方建议在 Pixel 上使用固定缩放：
-
width=device-width指向设备独立像素（DIP），不是物理像素 —— Pixel 6 的 CSS 宽度仍是412px（而非 1080px） - 去掉
shrink-to-fit=yes（Safari 专用，Chrome/Android 忽略） - 避免
target-densitydpi（已废弃，仅旧 Android WebView 识别）
用 vh/vmin 替代固定 px 高度，避开刘海与底部导航栏
Pixel 5/6/7/8 全系带圆角 + 刘海（或挖孔）+ 底部手势条，100vh 会包含不可交互区域，导致内容被遮挡。正确做法是：
- 关键容器用
height: 100dvh（dvh= dynamic viewport height，Chrome 105+ / Android Chrome 支持） - 兼容老版本：用 JS 动态注入
style，读取window.visualViewport?.height或screen.height * window.devicePixelRatio - 避免
min-height: 100vh做全屏布局 —— 在 Pixel 上可能撑出多余空白
CSS 字体与点击目标需响应系统缩放设置
Pixel 用户若在「设置 → 显示 → 字体大小与样式」中调大字体，px 文字不会等比放大，但 rem 和 em 会（前提是根字体基于 font-size: 16px 且未被重置）。更稳妥的方式：
立即学习“前端免费学习笔记（深入）”；
- 根元素设
font-size: 1rem（默认继承系统设置），不用html { font-size: 62.5% } - 按钮/链接最小尺寸必须 ≥
48px（Google Material Design 规范），用min-width: 48px; min-height: 48px - 禁用
-webkit-text-size-adjust: none—— 它会强制禁用系统字体缩放，在 Pixel 上直接违反无障碍要求
避免依赖 window.devicePixelRatio 做像素级适配
Pixel 手机（如 Pixel 7 Pro）支持 LTPO 动态刷新率，devicePixelRatio 可能在 2.625–2.8125 之间浮动，且不同应用内 WebView 行为不一致。不要用它计算缩放比例或生成 @media 查询。
- 媒体查询应基于
width或min-width（如@media (min-width: 412px)），而非resolution - 图片适配用
srcset+sizes，例如：
- Canvas 渲染需手动 set
canvas.width = canvas.clientWidth * window.devicePixelRatio，但仅限必要场景（如绘图、游戏）
Pixel 的真实适配难点不在分辨率，而在系统 UI 层叠逻辑（状态栏高度变化、手势条遮挡、字体缩放穿透 DOM）—— 所有 CSS 单位和 JS 尺寸读取都得绕开“假设屏幕干净”的思维惯性。
