视口适配需与CSS单位、字体策略、图片处理协同，基础配置为<meta name="viewport" content="width=device-width, initial-scale=1.0">；禁用缩放需谨慎；字体推荐rem/em并确保交互元素≥16px；图片须设max-width:100%；可添加Apple/Chrome专属优化meta标签。
视口适配是移动端访问体验的起点，不是加个 meta 标签就完事。关键在于它要和 CSS 单位、字体策略、图片处理协同工作，否则页面可能文字看不清、布局错位、横向滚动或点击困难。
基础 viewport 配置要精准
必须在 <head> 中写入：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这是最简且推荐的写法。多数场景下无需添加 maximum-scale=1.0 或 user-scalable=no ——尤其含表单、搜索框或长文本的页面，禁用缩放会损害可访问性，反而降低体验。
立即学习“前端免费学习笔记（深入）”；
如果项目有强一致性要求（如营销活动页），可按需加入 maximum-scale=1.0，但务必测试 iOS 键盘弹出时是否导致输入框被遮挡。
字体与尺寸单位要响应式
仅靠 viewport 无法解决小屏字太小的问题。固定 px 字体在 iPhone SE 上会难以阅读。
- 用 rem 或 em 替代 px 定义 font-size，配合根元素动态调整（如 JS 设置 document.documentElement.style.fontSize）
- 搜索框、按钮等交互元素的 font-size ≥ 16px，iOS Safari 才不会强制放大
- 给 input 添加 -webkit-text-size-adjust: 100%，防止 Safari 自动缩放文本
- 设置 min-height: 44px（触控最小建议尺寸），提升点击准确性
图片与容器必须弹性约束
图片溢出、容器定宽（如 width: 375px）是引发横向滚动的常见原因。
- 所有图片加 max-width: 100%; height: auto;
- 避免写死像素宽度，改用 width: 100vw、flex: 1 或媒体查询 + 百分比布局
- 使用 box-sizing: border-box 统一盒模型，防止 padding/border 导致宽度超限
- 对响应式图片，优先用 <picture> + srcset，按设备 DPR 和宽度加载合适资源
补充 Apple 和现代浏览器专属优化
提升原生感与品牌一致性：
- iOS 状态栏：加 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
- 主屏启动：加 <meta name="apple-mobile-web-app-capable" content="yes">，用户从桌面打开时隐藏 Safari UI
- 地址栏主题色（Chrome/Edge）：加 <meta name="theme-color" content="#4CAF50">
