viewport标签必须置于最前且唯一，content仅限width=device-width, initial-scale=1.0；位置错误、多标签或缺一参数均导致缩放异常、横向滚动及300ms延迟。
viewport 标签必须写对，否则全屏只是假象
移动端所谓“全屏”，不是靠 JS 拉伸或 CSS 强撑出来的，而是浏览器从第一帧就开始按设备真实宽度渲染。如果 缺失或参数错，哪怕后面 CSS 写得再精准，页面也会被当成 980px 宽桌面页缩放显示——你看到的“全屏”其实是被压缩过的镜像。
常见错误写法： —— iOS Safari 会忽略它，仍强制缩放；user-scalable=no 虽能锁死缩放，但会禁用双击放大、影响可访问性，WCAG 不合规。
- 正确写法（推荐）：
-
width=device-width是基础，告诉浏览器“别猜，就用物理像素宽度” -
initial-scale=1.0必须配对出现，否则 iOS 会重置为 0.5 左右的默认缩放 -
maximum-scale=1.0可选，仅用于防双击放大导致布局错位，但慎用——真机测试时发现部分安卓厂商浏览器会误判为不可缩放
容器宽度别硬设 px，用 clamp() + max-width 组合更稳
很多人以为加了 viewport 就万事大吉，结果在 iPhone SE（320px）上按钮溢出、在 iPad Pro（1024px）上留白过多。问题出在 CSS 宽度单位：用 width: 375px 这类固定值，等于把所有设备塞进同一套尺寸逻辑里。
真正适配全屏的写法是让容器“有弹性但有边界”：
- 主容器用
width: clamp(320px, 100%, 1200px)：最小不窄于小屏、最大不宽过大屏、中间随视口等比伸缩 - 配合
max-width: 100%和box-sizing: border-box，避免 padding/border 撑破视口 - 绝对定位元素（如浮层、提示框）要加
left: 0; right: 0;而非width: 100%，防止因 margin 或 transform 偏移导致横向滚动条
Flex/Grid 布局要设 height: 100vh，但得防 iOS 键盘顶起
全屏页面常需要“内容区占满剩余高度”，比如顶部导航+滚动内容区。直接写 height: 100vh 在 Android 上基本可靠，但在 iOS Safari 中，地址栏收起/弹出、软键盘唤起都会导致 vh 值动态变化——内容被顶飞、底部遮挡、滚动卡顿。
稳妥做法是用 Flex 布局兜底，而非依赖视口单位：
- 根容器
设display: flex; flex-direction: column; min-height: 100vh; - 头部/尾部用
flex-shrink: 0固定高度，中间内容区用flex: 1; overflow-y: auto; - 避免在
height: 100vh元素内嵌套position: fixed，iOS 下 fixed 元素可能脱离视口锚点
图片和字体必须响应式，否则全屏也是残缺的
一个页面在视觉上“全屏”，不代表资源加载也适配。常见断层现象：小屏上图片模糊、大屏上文字太小、横屏时图标错位——根源不在布局，而在媒体资源没做响应式处理。
关键控制点：
- 图片用
src - 字号优先用
rem或clamp(1rem, 2.5vw, 1.5rem)，避免纯px或em在缩放时失衡 - 禁止用
transform: scale()模拟全屏，它会创建新图层，导致z-index失效、input 聚焦异常、滚动抖动
真机调试时重点看：是否出现横向滚动条（overflow-x: hidden 往往只是掩盖问题）、键盘弹出后表单是否被顶出可视区、iOS Safari 地址栏切换时页面是否跳动——这些才是全屏布局是否真正落地的试金石。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
