平板端弹窗蒙层需用viewport元标签+媒体查询+fixed定位+100vw/vh+background-size控制，缺viewport会导致媒体查询失效，ios还需处理安全区和滚动穿透。

平板端弹窗蒙层背景要铺满整个视口，光靠 width: 100%; height: 100% 不够——它只按父容器算，而父容器可能没撑满，或受定位、overflow 等影响。真正起效的是结合 viewport 设置 + 媒体查询 + 背景尺寸控制 的组合方案。

必须先写对 viewport 元标签

媒体查询在平板上失效，90% 是因为 viewport 没配对。缺了它，浏览器会把页面当成 980px 宽的“桌面视口”来渲染，@media (min-width: 768px) 就永远收不到真实宽度。

正确写法（放在 最前面）：

用媒体查询区分平板并设蒙层全屏

平板常见宽度区间是 768px–1024px（横屏 iPad 是 1024px），但别死守数字，优先按内容表现断点。建议这样写：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

• @media screen and (min-width: 768px) and (max-width: 1024px) —— 覆盖主流平板竖/横屏
• 蒙层元素（比如 .mask）设为固定定位，脱离文档流，避免被父级限制：

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.7);
}

背景图蒙层需用 background-size: cover 或 contain

如果蒙层带背景图（比如渐变纹理或半透底纹），不能只靠 width/height，得靠 CSS 背景控制：

• background-size: cover：图片等比缩放，完全覆盖整个蒙层区域，可能裁剪边缘 —— 适合强调视觉满屏感
• background-size: contain：图片等比缩放，完整显示全部内容，可能留白 —— 适合图标型或文字型背景图
• 务必加 background-position: center 和 background-repeat: no-repeat，防止偏移或重复

.mask-bg {
  background: url('mask-bg.png') no-repeat center;
  background-size: cover;
}

注意 iOS 平板 Safari 的滚动穿透与安全区

iPad Safari 在弹窗时可能出现底部工具栏遮挡或滚动穿透。可加两处微调：

• 给 body 加 overflow: hidden 防止底层滚动（弹窗显示时）
• 对 iPad 单独加 padding-bottom（用 JS 检测或媒体查询）：

@media screen and (min-width: 768px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
  .mask { padding-bottom: env(safe-area-inset-bottom); }
}

这样能兼容 iPadOS 的底部安全区，避免内容被遮。