移动端h5全屏水印需以fixed背景图铺满并用canvas为video叠加动态水印，配合原生flag_secure/issecure实现防截图，同时通过viewport-fit=cover和100vh适配全面屏。
移动端 H5 实现全屏水印并兼顾防截图效果，关键不在“禁止截屏”（Web 无法真正阻止），而在于让水印成为渲染层不可剥离的一部分，并确保它在各种全屏场景下稳定覆盖。下面分两块讲清楚：怎么铺满、怎么增强防截能力。
一、全屏水印铺满：用 fixed + background-image 最稳
不要用一堆绝对定位 div 堆叠，也不推荐纯 CSS 伪元素（::after 在某些 WebView 或全屏播放器中可能被裁切）。最可靠的方式是直接在 body 上设置背景水印：
- 用透明 PNG 或 base64 编码的 SVG 作为水印图，文字带 alpha 通道，底色为透明，避免压不住内容
- CSS 设置：
background-image: url(...); background-repeat: repeat; background-size: 200px 200px;（数值按需调整疏密） - 必须加
background-attachment: fixed;，否则滚动时水印会随页面滑动，失去“固定覆盖感” - 禁用
opacity控制透明度——它会让整个背景变淡，连渐变或阴影都弱化；透明度应由图片自身控制
二、提升防截图能力：从渲染层和运行环境双路入手
Web 端无法拦截系统级截屏，但可以显著增加截图可用性门槛：
-
Canvas 视频水印：对 video 元素，用 canvas 实时逐帧绘制动态水印（含用户名、时间戳等），同步 video 显示尺寸、右下角锚定、
globalAlpha = 0.3，截图/录屏/全屏播放均可见 -
原生层防护（需 App 配合）：若 H5 运行在公司自研 App 内，Android 可通过
FLAG_SECURE、iOS 可设UIView.isSecure = true（iOS 13+），使系统截图该区域变黑——H5 通过 JSBridge 调用原生接口触发 -
规避 DOM 层水印失效风险：海康等 SDK 全屏时会创建独立全屏元素，挂载在父容器上的水印 div 不会被渲染。正确做法是监听
fullscreenchange，找到document.fullscreenElement，把水印节点 append 到它内部
三、视口适配要配合水印生效
全面屏机型（尤其 iOS）若不配置 viewport-fit=cover，水印可能被状态栏或底部安全区裁掉：
- 在
中设置：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> - 配合 CSS 使用
env(safe-area-inset-top)等环境变量，确保关键操作区避开刘海，但水印背景本身应覆盖整个100vh × 100vw区域 - 避免用
height: 100%，改用min-height: 100vh或直接height: 100vh，防止内容少时水印铺不满
核心逻辑就三点：水印走背景层、视频走 Canvas 帧级合成、防截靠原生能力兜底。不复杂，但容易忽略细节。
