HTML5网页发布前必须检查三件事：一是中配置viewport和charset元信息，二是用overflow-x:hidden和100vw实现“隐藏法”适配，三是确保服务器MIME类型正确、无HTTPS混合内容、清除微信X5缓存。
HTML5网页发布前必须检查的三件事
不配置好基础元信息，再精美的HTML5页面在手机上也会显示异常。发布前务必确认： 中包含以下三项：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">—— 缺失会导致页面默认按桌面宽度渲染，缩放失灵 -
<meta charset="UTF-8">—— 防止中文乱码，尤其在微信内置浏览器中极易触发 - 所有外部资源（CSS/JS/图片）使用相对路径或带协议的绝对路径，避免本地双击打开时因
file://协议导致跨域或加载失败
“隐藏法”适配本质是禁用横向滚动 + 弹性布局控制
所谓“隐藏法”，并非真正隐藏内容，而是通过 CSS 阻断用户手动拉伸、缩放导致的错位，同时让内容按视口比例自然收缩。关键不在 JS，而在两行 CSS：
<style>
html { overflow-x: hidden; }
body { width: 100vw; margin: 0; }
</style>
注意：overflow-x: hidden 必须作用于 html 元素（不是 body），否则 iOS Safari 仍可能触发横向滚动条；100vw 可确保内容撑满视口宽度，避免因默认 body 的 margin 或 padding 留白。
响应式单位选 rem 还是 vmin？看场景
字体和间距适配不能只靠媒体查询硬切断点。实际项目中：
立即学习“前端免费学习笔记（深入）”；
- 文字类内容（标题、正文）优先用
rem+font-size动态设置根字号（如通过 JS 监听resize或orientationchange调整document.documentElement.style.fontSize） - 全屏型 H5（如活动页、引导页）更适合
vmin：例如font-size: 4vmin;表示字体始终为视口短边的 4%，缩放更平滑 - 慎用
%做宽高——当父容器未设高时，height: 100%会失效；改用height: 100vh更可靠
发布到服务器后手机打不开？先查这三点
本地预览正常 ≠ 手机可访问。常见发布后失效原因：
- 服务器未正确设置 MIME 类型：确保
.html返回text/html，.js返回application/javascript，Nginx/Apache 配置遗漏会导致白屏 - HTTPS 混合内容：页面用 HTTPS 加载，但内嵌了
http://的图片或脚本 → 浏览器直接拦截，控制台报Mixed Content错误 - 微信内置浏览器缓存顽固：首次发布后，需在微信中访问
debugx5.qq.com清除 X5 内核缓存，否则可能加载旧版 HTML
真正的适配难点不在写法，而在于不同安卓 WebView 和 iOS WKWebView 对 viewport 解析存在微小差异，建议在真机上用远程调试确认渲染结果，别信模拟器。
