应优先使用100dvh而非100vh，因其能实时响应ios地址栏收起、键盘弹出等视口变化；配合html/body重置、box-sizing统一及viewport声明等基础清理，并用min-height实现内容自适应。

移动端 H5 页面想靠 vw 和 vh 实现“完美全屏”，关键不在简单写 width: 100vw; height: 100vh，而在于解决它在真实手机环境下的三大硬伤：滚动条占空间、iOS 地址栏动态收起、缩放或键盘弹出导致视口突变。真正能落地的方案，是组合使用现代单位、基础重置和必要降级。

必须做的基础清理

再好的 vw/vh 也会被默认样式拖垮。这几项不处理，100% 出白边、滚动条或高度塌陷：

• 强制重置 html 和 body：html, body { margin: 0; padding: 0; height: 100%; } —— 浏览器默认 body 有 8px margin，不归零就会顶部/底部露白
• 全局盒模型统一：加 * { box-sizing: border-box; }，避免 padding/border 撑破 100vh 高度
• viewport 必须声明：<meta name="viewport" content="width=device-width, initial-scale=1.0"> —— 没它，dvh 单位在 iOS 上可能失效

优先用 100dvh，不是 100vh

100vh 在 iOS Safari 中是“初始视口高度”，地址栏一收，页面就留白；100dvh（dynamic viewport height）才是真正的“当前可见高度”，会实时响应地址栏显隐、键盘弹出等变化。

推荐写法（兼容性+语义兼顾）：

.fullscreen {
  width: 100vw;
  min-height: 100vh;     /* 旧浏览器 fallback */
  min-height: 100dvh;   /* 现代浏览器主力 */
  box-sizing: border-box;
}

注意用 min-height 而非 height：内容少时撑满一屏，内容多时自然延展可滚动，不会截断。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

vw/vh 布局中容易忽略的细节

单纯铺满背景或容器还不够，实际业务中常遇到这些卡点：

• Flex 居中失败？ 不是 Flex 写错了，而是父容器没“真正有高度”——确保父级同时满足：display: flex + min-height: 100dvh + html, body { margin: 0 }
• 横向滚动条出现？ 100vw 包含了垂直滚动条宽度（约 17px）。若页面本身需滚动，建议改用 width: 100% 或加 overflow-x: hidden 到 body
• 字体和间距也想响应式？ 可搭配 vw 做文字适配，例如：font-size: clamp(14px, 4.2vw, 18px);，或用 rem 动态根字号配合 vw 基准换算

老设备兜底策略

如需兼容 iOS 16.3 或更早版本（不支持 dvh），不要用 @supports 包裹——Safari 16.3 会识别但不执行，反而导致降级失效。

稳妥做法是直接双写，让后写的生效：

section {
  min-height: 100vh;
  min-height: 100dvh; /* 支持则覆盖上一行 */
}

极端情况（如 WebGL 画布、全屏视频封面）必须像素级精准，再加轻量 JS 监听：

function updateHeight() {
  document.documentElement.style.height = window.innerHeight + 'px';
}
window.addEventListener('resize', updateHeight);
updateHeight();

但绝大多数 H5 活动页，min-height: 100dvh + 基础重置已完全够用。