必须在中正确添加viewport标签，标准写法为，缺一不可；否则页面会以桌面宽度渲染后缩放，导致文字小、点击不准、布局混乱。
标签实现移动端页面的自动适配">
核心就一条：必须在 里写对这行标签，其他适配手段都建立在这个基础之上。
viewport 标签是移动端显示的“开关”
不加或写错，浏览器会按桌面默认宽度（通常是 980px）渲染页面，再整体缩放进手机屏幕——结果就是文字小得看不清、按钮点不准、布局挤成一团。
正确写法只有一种主流组合，缺一不可：
- width=device-width：让 CSS 像素宽度等于设备逻辑宽度（比如 iPhone 14 是 390px），不是物理像素，也不是固定值
- initial-scale=1.0：强制首次加载时以 1:1 比例显示，防止 iOS Safari 自动缩放导致字体模糊或 touch 区域偏移
推荐最小可用配置：
哪些参数可以加，哪些要谨慎
以下属性按需添加，但要注意实际影响：
立即学习“前端免费学习笔记（深入）”；
- maximum-scale=1.0 和 minimum-scale=1.0：锁死缩放范围，适合纯展示页；但会损害可访问性（视障用户可能需要放大）
- user-scalable=no：禁用双指缩放，常见于活动页或游戏页；同样影响可访问性，非必要不建议启用
-
viewport-fit=cover：配合 iOS 安全区域（如刘海屏、圆角），需搭配 CSS 的
env(safe-area-inset-*)使用
常见错误写法及后果
这些写法看似接近，实则会导致严重显示问题：
-
content="width=320"：硬编码固定宽度，高 DPR 设备（如 iPhone）上内容被强行压缩，文字发虚 -
content="width=device-width"（缺少initial-scale=1.0）：iOS Safari 仍按 980px 渲染后缩放，点击事件坐标错位 -
content="initial-scale=1.0"（缺少width=device-width）：视口宽度未对齐设备，左右滚动或留白
配合 CSS 才算真正完成适配
viewport 只解决“怎么显示”，后续还需合理选择单位和布局方式：
- 优先用
rem或vw/vh替代固定px，实现等比缩放 - Flex 布局比浮动更可靠，子项加
flex-shrink: 0防止被压缩变形 - 图片用
srcset+sizes提供多分辨率资源，避免在高清屏上模糊
