统一h5移动端视口适配需强制使用标准viewport meta标签，设计稿基准统一为375px，优先采用vw/vh单位，横屏须加媒体查询兜底，并通过自动化工具校验落地一致性。
团队统一 H5 移动端视口适配，核心是锁定 viewport 行为 与 单位基准逻辑，避免各人写法不一导致横竖屏错位、刘海遮挡、缩放异常或字体跳变。关键不在“选哪种方案”，而在“怎么让所有人按同一套规则落地”。
统一 viewport meta 标签模板
所有项目 HTML 的 中必须使用且仅使用以下标准写法：
说明：
- width=device-width：强制布局视口宽度 = 设备逻辑像素宽度，这是适配起点
- initial-scale=1.0：确保页面加载即以 1:1 渲染，不放大也不缩小
- maximum-scale=1.0 & user-scalable=no：业务强要求禁缩放（游戏、表单、支付页等），若需可缩放（如图文阅读），仅移除这两项，但必须同步评审并记录原因
-
viewport-fit=cover：覆盖 iPhone X 及后续全面屏的安全区域，配合 CSS
env(safe-area-inset-*)使用，不可省略
明确设计稿基准与单位选用规则
团队需在项目初始化阶段书面确认两项：
- 设计稿宽度：统一为 375px（iPhone SE/8 基准）或 750px（2x 视觉稿），禁止混用。推荐 375px，降低计算复杂度，适配 vw/vh 更直观
-
CSS 长度单位主选路径：
- 通用型 H5（营销页、活动页、轻交互）→ 优先用 vw/vh（如
font-size: 4.26vw对应 375 设计稿的 16px） - 复杂交互型（含大量 JS 动态样式、第三方组件嵌入）→ 采用 postcss-px-to-viewport 插件（配置
viewportWidth: 375），禁止手写 rem 换算 - 禁用原生 rem 手动计算（如通过 JS 动态设置
html.fontSize），易与第三方库冲突且维护成本高
- 通用型 H5（营销页、活动页、轻交互）→ 优先用 vw/vh（如
横屏场景必须声明媒体查询兜底
仅靠 viewport 不足以应对横屏切换。所有涉及全屏展示（如游戏、视频、大图预览）的页面，必须在 CSS 中加入明确方向判断：
/* 横屏专用样式 */@media screen and (orientation: landscape) {
.full-screen-game { width: 100vh; height: 100vw; transform: rotate(90deg); transform-origin: center; }
body { overflow: hidden; }
}
同时建议在 JS 中监听 window.orientation 或 matchMedia('(orientation: landscape)')，用于触发横屏提示、按钮重排或资源懒加载。
建立自动化校验机制
靠人工 review 容易遗漏。应在构建流程中加入检查：
- Webpack/Vite 插件或 ESLint 插件检测 HTML 文件是否缺失或错误书写 viewport meta
- CI 流程中运行 Puppeteer 脚本，在模拟 iPhone 12 / Android 12 环境下验证：
document.documentElement.clientWidth === window.screen.width是否恒成立（排除缩放干扰） - 设计稿标注工具（如 Zeplin/Figma 插件）导出时自动附加单位换算注释，与前端约定字段名（如
@vw-16表示 16px → x vw）
