全屏单页滑动布局的核心限制是浏览器默认 html 和 body 不继承视口高度，导致 height: 100% 失效；必须显式设置 html, body { height: 100%; margin: 0; overflow: hidden }，缺一不可。
全屏单页滑动布局的核心限制是什么
浏览器默认的 body 和 html 元素不继承视口高度，直接写 height: 100% 会失效——这是绝大多数人卡住的第一步。必须显式重置根级容器高度，并禁用默认滚动干扰。
关键三行 CSS 缺一不可：
html, body {
height: 100%;
margin: 0;
overflow: hidden;
}漏掉 overflow: hidden，哪怕布局正确，也会在 Chrome/Firefox 中出现意外滚动条；漏掉 margin: 0，body 默认外边距会导致顶部留白。
如何让每个 section 真正占满视口且支持滑动
不能只靠 height: 100vh —— 它在 iOS Safari 和部分 Android 浏览器中会把地址栏高度算进去，导致内容被截断或滚动错位。稳妥做法是用 JavaScript 动态计算可用高度并注入 CSS 变量。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 监听
resize和orientationchange事件，更新--vh变量：document.documentElement.style.setProperty('--vh', window.innerHeight * 0.01 + 'px'); - CSS 中用
height: calc(var(--vh, 1vh) * 100)替代100vh - 每个
<section>必须设scroll-snap-align: start，父容器加scroll-snap-type: y mandatory
注意：iOS 15+ 才完整支持 scroll-snap，老版本需 fallback 到 touchmove + scrollTop 手动控制，但会失去原生惯性滚动。
移动端 touch 滑动时常见的“卡顿”和“跳帧”怎么解
根本原因是浏览器对 scroll 事件的节流策略，以及未启用硬件加速。不是 JS 写得不够快，而是渲染管线没被正确触发。
- 给滑动容器加
transform: translateZ(0)或will-change: scroll-position强制 GPU 渲染 - 避免在
scroll回调里读取scrollTop，改用getBoundingClientRect()+IntersectionObserver做节流判断 - 禁止在滑动过程中动态修改
section的height或display，否则触发强制同步布局（Layout Thrashing）
尤其注意：微信内置浏览器（X5 内核）对 scroll-snap 支持极差，必须单独检测 navigator.userAgent.includes('MicroMessenger') 并降级为 JS 驱动滚动。
响应式断点下如何保持全屏比例不失真
单纯用媒体查询改 font-size 或缩放 transform 会让文字模糊、图片拉伸。真正可控的方式是用 CSS 自定义属性 + 视口单位组合。
- 定义基准尺寸：
:root { --base-size: clamp(1rem, 4vw, 1.25rem); } - 所有字号、内边距、间距统一用
var(--base-size)，避免混用px和rem - 图片/视频容器用
aspect-ratio: 16/9+object-fit: cover，而非固定宽高 - 禁用
user-scalable=no在viewport中——它会让 pinch-zoom 失效，反而破坏可访问性
最易忽略的一点：iOS 设备横竖屏切换时，window.innerHeight 不会立刻更新，要等 resize 事件后延时 100ms 再重新计算，否则会出现短暂白屏或错位。
