HTML5转APP的屏幕适配关键在于WebView对viewport的控制与CSS单位选择：必须显式设置viewport meta、禁用user-scalable，并优先使用rem/vw替代px，同时需针对安卓ROM和iOS WKWebView特性做原生层适配与真机测试。
HTML5 转 APP 本身不解决屏幕适配问题，适配难点不在“转”这一步，而在 WebView 容器内 HTML 的渲染行为是否可控——多数适配失败，其实是没管住 viewport 或忽略了原生层对缩放的干预。
WebView 初始化时必须设置 viewport meta
很多开发者以为写了响应式 CSS 就够了，结果在 Android WebView 或 iOS WKWebView 中文字小得看不清、布局错位。根本原因是 WebView 默认忽略页面的 meta name="viewport"，尤其在 Cordova / Capacitor / uni-app 等框架中，若未显式启用，viewport 可能被忽略或重置。
- 确保 HTML
中存在且仅有一条：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> - Cordova 用户需检查
config.xml是否启用了WebViewViewport相关配置；Capacitor 则需确认capacitor.config.ts中未禁用webviewViewport - iOS WKWebView 在某些版本下会强制忽略
user-scalable=no，如需彻底禁缩放，得配合原生层拦截双指手势（非纯 HTML 可解）
px 单位在高 DPI 屏上会“变小”，优先用 rem/vw
Android 中高端机普遍是 2x/3x 像素密度，但 WebView 渲染仍按逻辑像素（CSS pixels）计算。用 px 写固定宽高，会导致 UI 在不同设备上视觉尺寸不一致——比如 14px 字体在 Pixel 6 上比在 Redmi Note 10 上看起来更细小。
- 用
rem配合 JS 动态设置document.documentElement.style.fontSize（例如按屏幕宽度等比缩放），比媒体查询更灵活 - 单页简单布局可直接用
vw：如标题字号写font-size: 4.8vw，在 375px 宽屏上≈18px，在 414px 上≈20px - 避免混用
px和rem做边框/圆角，否则高 DPR 下会出现 0.5px 边框渲染为 1px 的“加粗”现象
安卓 WebView 的 initial-scale=1.0 有时不生效
部分国产安卓 ROM（如 MIUI、EMUI）会主动修改 WebView 的初始缩放策略，导致即使写了 initial-scale=1.0，页面仍被放大或缩小，表现为内容横向滚动或留白。
立即学习“前端免费学习笔记（深入）”；
- 临时补救：在页面加载完成后用 JS 强制重设缩放：
document.body.style.zoom = "1"（仅 Chrome/Android WebView 有效，iOS 不支持） - 更稳方案：改用
transform: scale(1)包裹根容器，并设置transform-origin: 0 0，同时禁用user-scalable - 真机测试必做：华为 P 系列、小米数字系列、三星 S 系列均出现过该问题，模拟器无法复现
真正卡住人的不是“怎么写响应式”，而是 WebView 容器是否把你的 CSS 当真——有些机型连 min-width: 100vw 都解析错。上线前务必在目标机型上用远程调试（Chrome DevTools 连接 Android，Safari Web Inspector 连接 iOS）实时查看 computed styles 和 viewport 实际值。
