网页在手机上显示过小，通常是因为缺少 viewport 元标签；只需在 中添加 ，即可使页面宽度适配设备屏幕并禁用默认缩放。
网页在手机上显示过小，通常是因为缺少 viewport 元标签；只需在 `
` 中添加 ``，即可使页面宽度适配设备屏幕并禁用默认缩放。移动端浏览器（如 Safari、Chrome for iOS/Android）默认以桌面视口宽度（通常约 980px）渲染页面，再将其缩放以适应小屏幕——这会导致文字、按钮、输入框等所有内容被整体缩小，即使 HTML 结构极其简单（如仅含
根本解决方法不是调整 CSS 宽度或媒体查询，而是告知浏览器如何理解视口尺寸。关键就在
中加入标准 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 SE 约 375px，iPhone 14 Pro Max 约 430px）；
- initial-scale=1.0：强制首次加载时以 1:1 比例渲染，不缩放；
- 浏览器不再“模拟桌面”，而是按真实移动尺寸布局，字体和控件自然变大、可点击区域更友好。
⚠️ 注意事项：
- 该 标签必须放在 内且尽可能靠前（在其他 CSS/JS 之前），否则页面可能先以错误视口渲染，再闪动重排；
- 不要写成 user-scalable=no 或 maximum-scale=1.0（除非有特殊无障碍需求），否则会禁用用户双指缩放，违反 WCAG 可访问性原则；
- 即使项目暂无响应式 CSS，添加 viewport 仍是移动端可用性的最低必要条件；后续再配合 rem、em 或媒体查询优化体验会更高效。
总结：响应式设计的第一步不是写 CSS，而是声明 viewport。它不改变样式本身，却决定了所有 CSS 尺寸计算的基准——没有它，width: 100%、font-size: 16px 等一切数值都将失去移动设备上的语义意义。
