iOS Safari 中 100vh 撑不满屏幕是因地址栏高度被静态计算；应优先用 100dvh，降级用 JS 动态 --vh；需 box-sizing: border-box 防 padding 溢出；键盘弹出时改用 flex: 1 + visualViewport 检测；字体用 clamp()，按钮用 min-height + safe-area 适配。
100vh 在 iOS Safari 中为什么撑不满屏幕
直接写 height: 100vh 在 iOS Safari（尤其是 iOS 15+）里经常导致页面底部被截断或滚动条意外出现——这不是 bug，是浏览器把地址栏、工具栏高度算进视口但不实时更新导致的。当你滚动时，100vh 还按初始视口高计算，而地址栏收起后实际可用空间变大，视觉上就“撑不满”了。
实操建议：
- 优先用
min-height: 100dvh替代100vh（dvh是动态视口单位，iOS 16+/Android Chrome 105+ 支持） - 降级方案：用 JavaScript 监听
resize，动态设置自定义 CSS 变量--vh，再在样式中用height: calc(var(--vh, 1vh) * 100) - 避免对
html或body直接设height: 100vh，容易触发 iOS 的缩放/滚动异常
盒模型如何防止 padding/margin 破坏全屏尺寸
即使高度设对了，padding 或 border 会叠加在 100vh 外，导致实际内容溢出或滚动。默认 box-sizing: content-box 就是这个行为。
实操建议：
- 全局重置：在
:root或*上加box-sizing: border-box，让padding和border包含在设定高度内 - 对全屏容器（如
.fullpage）显式声明height: 100dvh+margin: 0+overflow: hidden，避免父元素边距干扰 - 慎用
padding-bottom做“安全区”留白——它会挤占内容空间；改用padding-bottom: env(safe-area-inset-bottom)配合viewport-fit=covermeta
移动端键盘弹出时 100vh 容器为什么会错位
Android 和 iOS 键盘弹出会收缩视口，但 100vh 不重算，导致容器高度远大于当前可视区域，内容被顶出、输入框被遮挡。
实操建议：
- 对需要适配键盘的区域（如登录表单），放弃固定
100vh，改用flex: 1+overflow-y: auto让内容自适应剩余空间 - 监听
focusin事件，在输入框聚焦时临时移除全屏高度限制，聚焦后恢复 - 不要依赖
resize判断键盘——很多 Android 浏览器不触发该事件；可结合visualViewport.height变化检测（兼容性需查 CanIUse）
全屏布局下字体和按钮尺寸怎么保持可读又不溢出
单纯设 100vh 容器后，内部文字若用固定 px 或未约束的 rem，在小屏或高缩放下可能撑破容器或过小不可点。
实操建议：
- 字号用
clamp(1rem, 4vw, 1.25rem)，兼顾最小可读性、响应式缩放和上限防溢出 - 按钮高度别硬写
48px，改用min-height: 48px+padding: 0.75em 1em，确保触控目标达标（WCAG 要求 ≥44×44px） - 关键操作区域（如提交按钮）加
position: sticky+bottom: env(safe-area-inset-bottom)，键盘弹出时仍可见
真正难的不是让页面“看起来全屏”，而是它在地址栏收放、键盘进出、横竖屏切换、不同安全区尺寸下都稳定不滚动、不遮挡、不缩放失真。这些细节没处理好，用户第一眼就会觉得“卡”或者“点不到”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
