全屏遮罩必须用 position: fixed 并设置 top/right/bottom/left 为 0，显式声明 pointer-events: auto，子元素用 flex 或 transform 居中，慎用 user-scalable=no。

遮罩层用 position: fixed 而不是 absolute

全屏遮罩必须覆盖整个视口，哪怕页面滚动也要始终填满屏幕。用 position: absolute 会相对于最近的定位祖先，一旦父容器有 overflow: hidden 或高度限制，遮罩就可能被截断或无法撑满。只有 position: fixed 才能真正锚定视口。

实操建议：

立即学习“前端免费学习笔记（深入）”；

Article To Html

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

下载

• 遮罩层元素直接放在 <body> 最外层，不要嵌套在内容容器里
• 必须设置 top: 0; right: 0; bottom: 0; left: 0;，不能只靠 width: 100%; height: 100%; —— 后者在某些浏览器（如 Safari）下对 fixed 元素不保证填满视口
• 加 z-index 确保层级高于所有内容，比如 z-index: 9999

遮罩层背景要透明但不可穿透点击

常见错误是只设 background-color: rgba(0,0,0,0.5)，却忘了默认情况下 pointer-events 是 auto，导致点击会透传到下层元素，遮罩形同虚设。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 显式声明 pointer-events: none; 如果你只想让它当视觉层（比如配合 JS 控制交互）
• 但绝大多数场景需要拦截点击，此时必须设 pointer-events: auto;（这是默认值，但建议写明以防被重置）
• 避免用 opacity: 0.5 替代 rgba() —— 前者会让整个遮罩及其子元素都变透明且可穿透，而 rgba() 只影响背景色

遮罩层内嵌内容需脱离文档流并居中

如果遮罩里要放弹窗、加载图标或提示文字，直接用 margin: auto 或 text-align: center 很难精准居中，尤其在动态尺寸下。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 给遮罩层内的子容器（比如 <div class="modal">）加 position: absolute; + top: 50%; left: 50%; transform: translate(-50%, -50%);
• 或者更现代的方式：用 display: flex; + justify-content: center; + align-items: center; 在遮罩层上生效（注意父级需设 height: 100vh 或上述四边定位）
• 别忘了给子容器设 z-index，确保它比遮罩背景高，否则文字/按钮会被盖住

移动端适配要注意 viewport 和缩放行为

在 iOS Safari 上，如果遮罩层内容触发了缩放（比如双指张开），或者页面设置了 user-scalable=no，可能导致遮罩错位、留白或无法响应触摸事件。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 中慎用 user-scalable=no，它会让遮罩内输入框无法唤起键盘（iOS 会禁用缩放导致焦点异常）
• 遮罩层本身加 -webkit-tap-highlight-color: transparent; 消除点击高亮干扰
• 测试真机时重点看 Safari —— 它对 fixed 元素在地址栏收起/展开时的重绘最敏感，有时需监听 resize 或 scroll 手动重设高度

遮罩看着简单，但跨设备、跨浏览器的一致性恰恰卡在几个细节上：四边定位是否写全、pointer-events 是否明确、居中逻辑是否依赖视口而非内容高度，还有 iOS 上那个藏得很深的缩放陷阱。