HTML中width和height不是或的合法属性，其文档大小范围须由CSS控制，如body{max-width:1200px;margin:0 auto;}配合viewport元标签实现响应式布局。
HTML 本身没有定义“文档大小范围”的属性——width、height、max-width 这些是 CSS 控制的，不是 HTML 元素原生属性；直接在 或 上写 width="1200" 不生效，也不合法。
为什么 width 和 height 在
HTML 规范里， 是根元素，不接受 width/height 这类呈现性属性（它们早在 HTML4 就被废弃了）。浏览器会忽略这些属性，或仅对部分替换元素（如 <img alt="HTML如何定义文档的大小范围_HTML定义文档大小范围属性【属性】" >、<iframe></iframe>）保留支持。
-
：完全无效，W3C 验证器报错 -
：HTML5 中已移除，仅在 quirks mode 下可能被旧引擎“勉强解析”，但行为不可靠 - 真正起作用的只有 CSS：
html { width: 100vw; }或body { max-width: 1200px; margin: 0 auto; }
viewport meta 标签决定的是视口范围，不是文档大小
很多人混淆“页面显示区域”和“文档尺寸”。<meta name="viewport"> 控制的是移动设备上初始缩放和可滚动区域，它不影响 DOM 文档的实际布局尺寸，只是告诉浏览器“怎么去渲染这个文档”。
- 常见错误写法：
<meta name="viewport" content="width=600">—— 这设的是视口宽度为 600px，不是让变成 600px 宽 - 如果想限制内容区最大宽度，必须配合 CSS：
body { max-width: 600px; margin: 0 auto; } - 不设
viewport时，移动端默认视口约 980px，内容会被缩小显示，但这不代表文档“变小”了
用 CSS 控制文档实际占用空间的可靠方式
所谓“文档大小范围”，最终体现为渲染后 document.documentElement.scrollWidth 和 scrollHeight 的值。这由 CSS 盒模型、流式布局、以及是否触发 BFC 决定，和 HTML 属性无关。
立即学习“前端免费学习笔记（深入）”；
- 限制整体宽度：
body { max-width: 1440px; margin: 0 auto; }（注意：要加margin: 0 auto才居中） - 防止意外撑大：
html { overflow-x: hidden; }，避免子元素溢出导致横向滚动条 - 响应式基础：
body { width: 100vw; max-width: 100%; }，确保在窄屏下不出现横向滚动 - 慎用
width: 100%在上——它相对于初始包含块（通常是视口），但可能和viewport设置冲突
真正影响“文档大小”的从来不是 HTML 属性，而是 CSS 盒模型 + 内容流 + 视口配置三者共同作用的结果。最容易被忽略的是：即使你写了 max-width: 1200px，一个没设 overflow: hidden 的绝对定位宽元素，依然会让 scrollWidth 暴涨。
