网页在手机上显示过小，通常是因为缺少 viewport 元标签；只需在 中添加 ，即可让浏览器按设备真实宽度渲染页面，消除默认缩放，实现基础响应式适配。
网页在手机上显示过小，通常是因为缺少 viewport 元标签；只需在 `
` 中添加 ``，即可让浏览器按设备真实宽度渲染页面，消除默认缩放，实现基础响应式适配。移动端浏览器（如 iOS Safari、Chrome for Android）在渲染桌面风格 HTML 时，默认会将页面以「虚拟视口」（通常约 980px 宽）加载，再整体缩小以适应屏幕——这正是你看到文字、按钮、文本域全部“迷你化”的根本原因。即使 HTML 结构极简（如你的正则敏感词过滤器），只要缺失 viewport 声明，该行为就会生效。
解决方案：在 中添加标准 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 CSS 像素 ≈ 1 设备独立像素（DIP），使字体、边框、间距按预期尺寸呈现。
⚠️ 注意事项：
- 该 标签必须放在 内且尽可能靠前（建议紧随 之后），避免因解析延迟导致短暂闪动或错误缩放；
- 不要使用 user-scalable=no 或 maximum-scale=1.0 等限制用户缩放的属性——它们违反可访问性规范（WCAG），且在 iOS 10+ 中已被部分忽略；
- viewport 仅解决「初始渲染尺寸」问题，不替代响应式 CSS（如媒体查询、弹性布局）。若需进一步优化小屏体验（如增大触摸目标、调整字体层级），应在 @media (max-width: 480px) 中补充样式。
添加后，在 iPhone Safari 中重新加载页面，你会发现
