TCL手机HTML5白屏或错乱主因是viewport配置错误、px单位滥用及WebView初始化不全；须设width=device-width且含initial-scale=1.0，优先用rem/vw响应式，WebView需启用JS、DOM存储与调试。
HTML5 页面在 TCL 手机上白屏或布局错乱，通常不是“TCL 特有 bug”，而是 viewport 配置或 CSS 单位使用不当
绝大多数 TCL 手机（如 TCL 20、TCL 30 系列）运行标准 Android 系统，内置 WebView 或 Chrome 内核，对 HTML5 支持良好。所谓“不兼容”，90% 源于开发者未正确声明视口、误用 px 固定尺寸、或忽略了 Android WebView 的默认缩放行为。
必须设置正确的
TCL 手机普遍采用高 DPI 屏幕（如 480dpi、560dpi），若 viewport 缺失或写错，页面会被强制缩放，导致文字过小、按钮点不中、甚至白屏（尤其在某些定制 ROM 的 WebView 中）。
- ❌ 错误写法：
（缺少initial-scale=1.0，部分 Android WebView 会默认缩放） - ✅ 推荐写法：
- 若需支持用户缩放（如阅读类页面），可去掉
user-scalable=no，但务必保留initial-scale=1.0 - 不要用
target-densitydpi—— 这是已废弃的 Android 旧属性，现代 TCL 手机（Android 5.0+）完全忽略它
慎用 px，优先使用 rem 或 vw/vh 做响应式适配
TCL 手机屏幕尺寸跨度大（从 6.1 英寸到 6.8 英寸），DPI 差异明显。直接写 font-size: 16px 在 560dpi 设备上实际渲染极小，而 16px 在低 DPI 上又可能过大。
- 用
rem：通过 JS 动态设置document.documentElement.style.fontSize，例如按屏幕宽度等比缩放（fontSize = window.innerWidth / 375 * 16） - 用
vw：标题字号可设为font-size: 5.33vw（对应 375px 设计稿下的 20px） - 避免全局用
px布局，特别是height、line-height、padding等影响视觉节奏的属性 - 测试时打开 Chrome DevTools → Device Toolbar → 选 “TCL 30 XE” 或类似 Android 12/13 设备模拟，观察渲染是否一致
WebView 场景下需额外处理 JavaScript 兼容性与权限
如果 HTML5 页面是嵌入 TCL 手机 App 的 WebView（而非浏览器打开），常见问题包括：
立即学习“前端免费学习笔记（深入）”；
-
console.log不输出？确认已启用调试：webView.setWebContentsDebuggingEnabled(true);
（仅限 Android 4.4+） - 调用
localStorage报错？需显式开启：webView.getSettings().setDomStorageEnabled(true);
- 页面加载空白但无报错？检查是否禁用了 JavaScript：
webView.getSettings().setJavaScriptEnabled(true);
- 摄像头/麦克风 API 失败？TCL 手机需在 App
AndroidManifest.xml中声明权限，并在运行时请求，HTML5 侧无法绕过
真正卡住的点，往往不在“TCL 专属适配”，而在 viewport 是否生效、单位是否随屏缩放、以及 WebView 初始化是否完整。先验证这三个环节，比查“TCL UA 字符串”或加 hack 更有效。
