HTML5对移动端适配更强，因其原生支持viewport、flexbox/grid及媒体查询等响应式底层能力；而HTML4/XHTML需外部补丁，且在非HTML5 doctype下viewport常失效、flex/Grid错位、媒体查询基准错误。
HTML5 对移动端适配更强，不是因为“新”本身，而是它原生支持了响应式必需的底层能力，而传统 HTML（指 HTML4/XHTML）必须靠外部补丁硬凑。
viewport meta 标签只在 HTML5 文档模式下可靠生效
这是最常踩的坑：很多老项目用 ，即使写了 ，iOS Safari 仍可能忽略或降级处理——尤其在缩放、双击放大等交互上表现异常。
原因在于：viewport 是 HTML5 规范明确纳入的机制，浏览器只在 （HTML5 doctype）触发的「标准模式」下完整实现其行为。
- ✅ 正确写法（必须放在
最前面）： - ❌ 即使内容一样，用 XHTML doctype 或无 doctype，
initial-scale可能被无视，user-scalable=no在新版 iOS 上直接失效
flexbox / grid 布局在 HTML5 中才是“开箱即用”
HTML4 时代做响应式只能靠浮动、表格、固定宽高 + JS 重算——既难维护，又无法真正响应视口变化。而 HTML5 不是“新增标签”，是让 CSS3 布局模块有了稳定执行环境。
立即学习“前端免费学习笔记（深入）”；
关键点在于：现代 CSS 布局依赖 HTML5 的语义化结构与渲染一致性。比如：
-
display: flex在 IE10+ 和所有现代移动浏览器中表现一致，但前提是文档解析为 HTML5 模式；否则某些安卓 WebView 会退回到怪异模式，flex item 宽度计算错误 -
grid-template-areas配合等语义标签，在 HTML5 下可被屏幕阅读器和 Chrome DevTools 正确识别；HTML4 里这些标签不被承认，CSS Grid 区域映射容易错位
媒体查询（@media）在 HTML5 下才真正“响应”视口变化
HTML4 页面即使写了 @media (max-width: 768px) { ... }，在部分安卓低版本 WebView 或微信内置浏览器中，width 媒体特性可能始终返回桌面宽度（如 980px），导致断点完全失效。
根本原因：媒体查询的视口基准依赖于 HTML5 的 viewport 元信息解析链。没有正确 doctype，浏览器就无法把 window.innerWidth、screen.width 和 CSS 媒体特性对齐到同一逻辑视口模型。
- 验证方法：在控制台运行
document.documentElement.clientWidth和window.innerWidth，若两者相差极大（比如 980 vs 375），基本可判定是 doctype 或 viewport 配置未激活 HTML5 渲染路径 - 修复核心只有两条：
+缺一不可，顺序不能颠倒
真正卡住人的往往不是“会不会写 media query”，而是页面压根没进 HTML5 渲染通道——viewport 不生效、clientWidth 假值、flex 子项塌陷，这些问题全堆在同一个起点上。
