应优先使用100dvh并降级至100vh，同时必须配置viewport标签、重置html/body尺寸、统一box-sizing，并在关键场景用js监听resize/scroll/orientationchange动态同步window.innerheight。
直接用 100vh 很容易出问题，尤其在 iOS Safari 上——地址栏收起时视口高度突变，页面底部会闪白或留空。真要满屏，得组合 viewport 控制、CSS 降级和必要时的 JS 补偿。
必须加 <meta name="viewport"> 标签
没这个标签，移动端的 100vh 就不可信。iOS Safari 会把“视觉视口”（含地址栏）当 vh 基准，导致高度算小；Android Chrome 也可能因缩放触发滚动条，撑破布局。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">是底线配置 - 如果产品允许用户缩放（比如阅读类 H5），至少保留
initial-scale=1.0，否则100vh在横竖屏切换时更不稳定 - 漏掉这行，后面所有 CSS 调整都可能白做
html 和 body 的 margin/padding/height 必须显式重置
浏览器默认给 body 加了 8px margin，还会在内容超宽时自动加滚动条——这两点直接让“满屏”变成“差一截”。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 必须写：
html, body { margin: 0; padding: 0; height: 100%; } - 只设
body { height: 100vh; }不够：若子元素有 margin 或 border，box-sizing默认是content-box，高度会溢出 - 推荐加：
*, *::before, *::after { box-sizing: border-box; }，避免后续调试被盒模型吃掉空间
优先用 100dvh，并为老浏览器降级到 100vh
dvh（dynamic viewport height）是 2023 年起被主流浏览器支持的新单位，它能响应地址栏收起/展开实时更新，比 100vh 稳定得多。
- CSS 中这样写更安全：
height: 100dvh; height: 100vh;（后声明的会被旧浏览器解析，新浏览器用dvh） - 不支持
dvh的浏览器（如 Safari 15.6 及更早）会 fallback 到100vh - 别用
min-height: 100vh当主力：它只保底，内容多时会撑高，失去“贴物理屏幕”的意义
对 Canvas、Video、WebGL 等关键容器，JS 动态同步 window.innerHeight
哪怕用了 100dvh，某些场景仍需 JS：比如 WebGL 渲染画布必须像素级匹配屏幕，或 iOS Safari 在页面刚加载、地址栏状态未稳时，dvh 还没生效。
- 监听
resize+scroll+orientationchange三个事件（iOS 地址栏变化不一定触发resize） - 节流执行：
element.style.height = window.innerHeight + 'px'; - 不要在
DOMContentLoaded里直接设高——此时window.innerHeight可能还是初始值，没反映地址栏真实状态
最易被忽略的点是：你以为设了 100vh 就完事，其实 viewport 标签、盒模型、单位选择、JS 补偿这四层缺一不可。尤其是 dvh 的兼容性写法和 iOS 的三事件监听，线上出问题基本都卡在这两步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
