网页在手机上显示过小，通常是因为缺少 viewport 元标签；只需在 中添加 ，即可让浏览器按设备真实宽度渲染页面并禁用默认缩放。
网页在手机上显示过小，通常是因为缺少 viewport 元标签；只需在 `
` 中添加 ``，即可让浏览器按设备真实宽度渲染页面并禁用默认缩放。当你在桌面浏览器中查看一个简单 HTML 页面（如正则敏感词过滤器）时，布局可能看起来比例正常；但一旦在 iPhone Safari 中打开，所有文字、按钮和表单控件却突然变得极小——这不是 CSS 未适配的问题，而是浏览器根本没“意识到”它正在移动设备上运行。
根本原因在于：现代移动浏览器默认采用「桌面视口」（通常约 980px 宽），然后将整个页面缩小以适应屏幕。这导致 1 像素 CSS 宽度被压缩到远小于物理像素，文字自然模糊又微小。而你尝试的 @media 查询或 .everything { width: 100% } 并未生效，正是因为这些样式是在“被缩放后的视口”上应用的——治标不治本。
✅ 正确解法：在
中添加标准 viewport 元标签：<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>
该声明包含两个关键指令：
- width=device-width：将视口宽度设为设备物理屏幕的逻辑宽度（例如 iPhone 14 的 viewport 宽度约为 390px），而非默认的 980px；
- initial-scale=1.0：强制页面首次加载时以 1:1 比例渲染，禁用自动缩放。
? 补充建议（提升移动端体验）：
- 若需进一步控制用户缩放行为（如禁止双指缩放），可追加 user-scalable=no（但请谨慎使用，影响可访问性）；
- 配合使用相对单位（如 rem、em 或 vw/vh）+ 媒体查询，可实现更精细的响应式排版；
- 确保 和 无意外 font-size 重置，避免 viewport 生效后字体仍异常。
⚠️ 注意：viewport 标签必须放在
内，且必须位于所有 CSS 和 JS 引入之前（尤其是框架类脚本），否则部分浏览器可能在解析到 viewport 前已触发错误渲染。一句话总结：响应式设计的第一道门槛不是媒体查询，而是视口元标签——它是移动优先渲染的基石，缺失它，后续所有 CSS 优化都将事倍功半。
