HTML4不支持响应式设计，因其缺失viewport机制、语义化容器及CSS媒体查询协同；即使添加meta viewport标签，在怪异模式下也会被忽略，仅HTML5标准模式才可靠支持。
HTML4 本身不支持响应式设计，不是因为语法限制，而是缺乏关键机制——它没有 这个概念，也没有语义化容器、CSS 媒体查询的原生协同支持。响应式设计依赖的是“HTML 结构 + CSS 媒体查询 + 视口控制”三者配合，而 HTML4 时代连 viewport 元素都不存在。
HTML4 页面加 viewport 标签有没有用？
加了也没用——浏览器（尤其是旧版 iOS Safari 和 Android Browser）在 HTML4 文档类型下会触发怪异模式（Quirks Mode），忽略 。即使你硬写进去，width=device-width 会被当作无效值处理，缩放行为退回到默认的桌面视口宽度（通常 980px 左右）。
- HTML4 的
会强制触发怪异模式或有限标准模式 -
viewport是 WebKit 在 iPhone OS 2.0（2008 年）引入的私有特性，仅在「标准模式」下被尊重 - 只有 HTML5 的
才能可靠激活现代视口解析逻辑
HTML5 中 viewport 的正确写法
必须放在 内，且要满足两个前提：文档声明为 HTML5，且不能有空格或注释干扰其解析顺序。最简可用写法是：
常见变体及说明：
立即学习“前端免费学习笔记（深入）”；
-
width=device-width：让布局视口宽度等于设备物理像素宽度（经缩放后），这是响应式的基础 -
initial-scale=1：禁止页面首次加载时自动缩放（iOS Safari 默认会放大文字） -
maximum-scale=1, user-scalable=no：慎用！会禁用双指缩放，违反 WCAG 可访问性要求 - 不要写
target-densitydpi：这是 Android 2.x 的过时私有属性，HTML5 中已废弃且无效果
为什么写了 viewport 还不响应？排查要点
不是标签没写对，而是常被以下问题掩盖：
- CSS 中没写媒体查询：
@media (max-width: 768px) { ... }缺失，光有 viewport 不会自动重排版 - 根元素或容器用了固定宽度：
width: 960px或max-width: 1200px没配width: 100%，导致内容溢出视口 - 图片没做响应：
max-width: 100%; height: auto;，撑破容器 - 使用了
px单位写死字体/边距，应改用rem、em或vw配合根字体动态调整 - 构建工具（如 Webpack/Vite）注入了重复或冲突的 viewport 标签，用浏览器开发者工具检查
实际输出
viewport 不是银弹，它只是告诉浏览器“怎么量”，真正决定“怎么排”的是 CSS 媒体查询和流式布局。HTML4 页面强行加 viewport 标签，就像给算盘装触摸屏驱动——硬件不支持，软件再努力也白搭。
