平板端弹窗蒙层需用viewport元标签+媒体查询+fixed定位+100vw/vh+background-size控制，缺viewport会导致媒体查询失效，iOS还需处理安全区和滚动穿透。
平板端弹窗蒙层背景要铺满整个视口，光靠 width: 100%; height: 100% 不够——它只按父容器算，而父容器可能没撑满，或受定位、overflow 等影响。真正起效的是结合 viewport 设置 + 媒体查询 + 背景尺寸控制 的组合方案。
必须先写对 viewport 元标签
媒体查询在平板上失效，90% 是因为 viewport 没配对。缺了它，浏览器会把页面当成 980px 宽的“桌面视口”来渲染，@media (min-width: 768px) 就永远收不到真实宽度。
正确写法（放在 <head> 最前面）：
用媒体查询区分平板并设蒙层全屏
平板常见宽度区间是 768px–1024px（横屏 iPad 是 1024px），但别死守数字，优先按内容表现断点。建议这样写：
-
@media screen and (min-width: 768px) and (max-width: 1024px)—— 覆盖主流平板竖/横屏 - 蒙层元素（比如
.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，防止偏移或重复
background: url('mask-bg.png') no-repeat center;
background-size: cover;
}
注意 iOS 平板 Safari 的滚动穿透与安全区
iPad Safari 在弹窗时可能出现底部工具栏遮挡或滚动穿透。可加两处微调：
- 给
body加overflow: hidden防止底层滚动（弹窗显示时） - 对 iPad 单独加 padding-bottom（用 JS 检测或媒体查询）：
.mask { padding-bottom: env(safe-area-inset-bottom); }
}
这样能兼容 iPadOS 的底部安全区，避免内容被遮。
