网页在手机上文字和控件过小，通常是因为缺少 viewport 元标签；只需在 中添加 ，即可让页面按设备真实宽度渲染并禁用默认缩放。
网页在手机上文字和控件过小，通常是因为缺少 viewport 元标签；只需在 `
` 中添加 ``，即可让页面按设备真实宽度渲染并禁用默认缩放。移动端浏览器（如 Safari、Chrome for iOS/Android）默认会以桌面视口宽度（通常约 980px）渲染页面，再整体缩小以适配屏幕——这导致文字、按钮、输入框等元素视觉尺寸严重缩水，即使 HTML 结构简单、未使用复杂 CSS，也会出现“内容只占屏幕三分之一却异常微小”的典型现象。
根本原因并非 CSS 媒体查询缺失或布局宽度设置不当，而是浏览器未获知应如何解释页面的初始显示尺寸。此时， 标签就是关键入口。
✅ 正确写法（必须放在 中）
<head> <meta charset="UTF-8"> <title>RegEx Profanity Filter</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head>
⚠️ 注意：该 标签需置于所有其他资源（如 CSS、JS）之前，且不可被 JavaScript 动态插入——浏览器在解析 HTML 初始阶段即读取 viewport 指令，延迟添加无效。
? 参数详解
| 属性 | 含义 | 推荐值 |
|---|---|---|
| width=device-width | 将视口宽度设为设备物理屏幕的逻辑像素宽度（如 iPhone 14 的 390px） | 必须启用 |
| initial-scale=1.0 | 页面首次加载时以 1:1 比例渲染，禁用自动缩放 | 强烈推荐 |
| user-scalable=no | （不推荐）禁止用户双指缩放 —— 降低可访问性，违反 WCAG 原则 | ❌ 避免使用 |
? 效果验证
添加后，在 iPhone Safari 中重新加载页面：
- 页面宽度自动撑满屏幕，不再呈现“迷你桌面版”错觉；
- 后续如需进一步响应式优化（如 @media (max-width: 480px) 调整 cols 或 font-size），也将基于真实视口尺寸生效。
? 补充建议
- 永远不要省略 viewport：它是现代响应式设计的基石，与媒体查询、Flexbox、CSS Grid 等技术协同工作，而非替代关系。
- 避免 width=1000 或固定数值：硬编码宽度会破坏跨设备兼容性。
- 检查控制台警告：Chrome DevTools → “Rendering” 面板可模拟设备并提示 viewport 缺失问题。
一句话总结：没有 viewport，就没有真正的响应式；一行 ，是移动端可读性的第一道防线。
