必须设置完整的 viewport：width=device-width, initial-scale=1.0, viewport-fit=cover；禁用 user-scalable=no；优先用 vw 或媒体查询替代 rem；图片设 max-width:100%；canvas 采用等比缩放+居中裁剪；触控需合理配置 touch-action。
viewport 设置必须加，且不能只写 width=device-width
vivo 手机（尤其是 X 系列、S 系列、iQOO）普遍采用高分辨率 OLED 屏（如 1080×2400、1260×2800），但系统 WebView 或 Chrome 内核默认仍可能以桌面视口渲染。只写 <meta name="viewport" content="width=device-width"> 是不够的——它缺了缩放控制，部分 vivo 机型（如搭载 OriginOS 4 的 X100 Pro）会因初始缩放不一致导致文字模糊或布局错位。
必须补全基础三项：
-
width=device-width：让页面宽度匹配物理设备宽度（不是 CSS 像素，而是设备独立像素） -
initial-scale=1.0：强制初始缩放为 1，避免 iOS/Android 渲染差异 -
viewport-fit=cover（尤其针对 vivo 全面屏刘海/挖孔）：防止内容被系统状态栏或圆角裁切
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
⚠️ 注意：不要加 user-scalable=no ——vivo 用户习惯双指缩放看图/读文，禁用会触发 Accessibility 审查失败，部分应用商店拒审。
CSS 中慎用 rem + flexible 方案，vivo 部分机型对 font-size 动态重设响应滞后
vivo 手机（特别是低配款 Y 系列、Z 系列）在低端芯片（如联发科 Helio G85/G99）上运行 WebView 时，document.documentElement.style.fontSize 的批量修改常有 100–300ms 延迟，导致首屏闪动或按钮错位。这不是 bug，是渲染管线调度策略不同。
立即学习“前端免费学习笔记（深入）”；
更稳妥的做法是：
- 用
vw替代 rem 做字号适配（例如font-size: 4.2vw对应 750px 设计稿的 16px） - 固定根字体大小为
16px，改用媒体查询分段控制：@media (max-width: 375px) { html { font-size: 14px; } } - 避免在
DOMContentLoaded后再 JS 修改html.style.fontSize，改用load事件后延迟 1 帧执行（requestAnimationFrame）
图片和 canvas 自适应要防“黑边+拉伸”双重失效
vivo 屏幕宽高比多变（19.5:9、20:9、甚至 21.5:9），单纯按宽度缩放 <canvas></canvas> 或 <img alt="HTML5怎样适配vivo手机_HTML5适配vivo屏幕尺寸的方法【教学】" > 会导致顶部/底部留黑边，或强行拉伸变形。vivo X Fold3 的内屏（2K+ 2K 分辨率）还会触发 canvas 的硬件加速降级。
实操建议：
- 图片统一加
img { max-width: 100%; height: auto; display: block; }，禁止width: 100%直接设死（会破坏 intrinsic ratio） - canvas 适配优先按「等比缩放 + 居中裁剪」逻辑，而非填满：
const canvas = document.getElementById('game'); const ctx = canvas.getContext('2d'); const dpr = window.devicePixelRatio || 1; const w = document.documentElement.clientWidth; const h = document.documentElement.clientHeight; <p>canvas.width = w <em> dpr; canvas.height = h </em> dpr; ctx.scale(dpr, dpr);</p><p>// 绘图区按标准设计稿 750×1334 缩放 const scale = Math.min(w / 750, h / 1334); ctx.translate((w - 750 <em> scale) / 2, (h - 1334 </em> scale) / 2); ctx.scale(scale, scale);
触控事件别漏掉 touch-action，vivo 浏览器默认启用双指缩放拦截
vivo 自研浏览器（基于 Chromium 120+）对 touchstart/touchmove 有额外拦截逻辑。如果只监听 click，在 vivo X100 上点击区域可能无响应；如果只监听 touchstart 但没设 touch-action，又会触发页面整体拖拽或缩放抖动。
正确姿势：
- 需要自定义手势的容器（如轮播、拖拽列表）加
style="touch-action: none;" - 普通按钮/链接保留
touch-action: manipulation（提升点击响应速度，vivo 会优化 300ms 延迟） - JS 中同时绑定
touchstart和click，并在touchstart里调用event.preventDefault()（仅当真需拦截默认行为时）
vivo 屏幕适配真正的难点不在代码量，而在“同一套 CSS 在 X100 Pro 和 Y30 上跑出两种渲染结果”——这往往是因为系统 WebView 版本碎片化（从 Chrome 96 到 124 不等），所以测试环节必须覆盖真机，不能只信 Chrome DevTools 的模拟器。
