iPhone浮窗网页，在iOS生态中通常指 Safari 与系统级「画中画（Picture-in-Picture，简称 PiP）」能力结合后，把网页中的视频内容从原页面「剥离」出来，形成可拖动、可缩放、可停留在桌面或其它App之上的悬浮网页视频窗口。它由 WebKit 与 iOS 系统的 AVKit 共同渲染， thuộc系统级浮层，而不是浏览器内 CSS 模拟的悬浮层。
从能力边界来看，iPhone 的浮窗网页只支持视频元素（HTML5 <video>），不支持任意 DOM 内容浮窗。也就是说，W3C 的 Document Picture-in-Picture API（让整个网页区块、 Canvas、弹幕容器浮窗的能力）截至目前在 iPhone 上的 Safari 中尚未支持，该 API 仅在 Chrome 116+ 等桌面/Android 浏览器可用。因此 iPhone 浮窗网页的工程实现，核心就是围绕 video 元素做 PiP 的检测、触发、状态同步与降级处理。
版本要求上，iPhone 画中画浮窗自 iOS 13（2019）的 Safari 开始支持，并在 iOS 14 / Safari 14 上完善了对标准 Picture-in-Picture API（document.pictureInPictureEnabled、requestPictureInPicture()）的实现，iOS 14.3 起又增加了 Media Session API 支持，可在浮窗中显示海报、标题、艺人等元数据，并提供播放/暂停/上一首/下一首控件。
最标准的实现是：先检测能力，再在用户手势中调用 requestPictureInPicture()，并通过事件保持网页控件与浮窗状态同步。参考代码：
<video id="player" src="movie.mp4" playsinline></video>
<button id="pipBtn">进入浮窗</button>
<script>
const v = document.getElementById('player');
const btn = document.getElementById('pipBtn');
async function toggle() {
if (!document.pictureInPictureEnabled) {
// iOS 13 兼容：WebKit 私有方法
if (v.webkitSupportsPresentationMode && v.webkitSupportsPresentationMode('picture-in-picture')) {
v.webkitSetPresentationMode(v.webkitPresentationMode === 'picture-in-picture' ? 'inline' : 'picture-in-picture');
}
return;
}
try {
if (document.pictureInPictureElement) await document.exitPictureInPicture();
else await v.requestPictureInPicture();
} catch (e) { console.error('PiP 失败:', e); }
}
btn.addEventListener('click', toggle);
v.addEventListener('enterpictureinpicture', () => btn.textContent = '退出浮窗');
v.addEventListener('leavepictureinpicture', () => btn.textContent = '进入浮窗');
</script>
针对旧版本与私有前缀，Safari 提供 webkitSetPresentationMode('picture-in-picture') 与 webkitSupportsPresentationMode()。做能力检测时，建议同时判断「标准 API 存在」与「iOS 上元素是否支持该模式」，因为 iPhone 与 iPad 的支持矩阵并不完全一致：写法可为 document.pictureInPictureEnabled && !v.disablePictureInPicture，再以 webkit 方法兜底。
触发约束方面，iPhone 的 Safari 要求浮窗必须由用户手势启动（如 click），不能自动 requestPictureInPicture()；视频必须存在视频轨道（纯音频流无法浮窗），并且建议视频已经开始播放或至少处于可播放状态。实践中可在监听到 'loadedmetadata' 或用户首次点击播放后再启用浮窗按钮，避免在未加载状态下调用失败。
用户在不点击网页按钮时，也可以走 iPhone 的原生交互路径：在 Safari 中全屏播放视频后，播放器右下角会出现画中画图标，点击即可把视频缩小为浮窗；随后可拖动到屏幕任意位置、双指缩放、或点按浮窗左上角关闭、点击恢复回原网页位置。系统层还支持「控制中心 → 播放控件」中的画中画入口，以及部分播放器（如YouTube网页）内的专用按钮。
为了让浮窗信息更完整，可配合 Media Session API：通过 navigator.mediaSession.metadata 设置标题、艺术家、专辑与封面海报，并定义 actionHandler，iOS 浮窗与锁屏/控制中心会同步展示这些信息。示例：
navigator.mediaSession.metadata = new MediaMetadata({ title: '课程直播', artist: '讲师', artwork: [{src: 'cover.jpg', sizes: '512x512'}] });
navigator.mediaSession.setActionHandler('play', () => v.play());
对于「整块网页内容浮窗」的需求（如把聊天面板、文档、直播控件整体悬浮），由于 iPhone 不支持 Document PiP，常见替代方案有：一是用 PWA 将站点添加到主屏幕，辅以后台播放能力获得类浮窗体验；二是开发原生 App，用 AVPictureInPictureController 配合自定义视图实现更彻底的悬浮内容；三是通过 Universal Links / URL Scheme 拉起 App 内的悬浮组件。若必须停留在 Safari 网页内，则只能做页面内的固定悬浮层，无法叠加到系统其它界面。
浮窗样式与尺寸同步上，进入 PiP 后网页可监听 pictureInPictureWindow 的 resize 事件来调整网页里的占位/续播 UI；exitPictureInPicture() 可在用户返回页面时主动唤回浮窗。需注意 Safari 不允许对系统浮窗做皮肤定制，也不可在浮窗中注入自定义按钮（除 Media Session 提供的媒体控件外）。
常见失败原因排查：按钮点击无效多为缺少用户手势上下文（异步 await 后手势丢失），应减少请求链路或使用 userActivation 判断；进入后无声音多为视频被静音或 PiP 启动时视频轨道未就绪；Safari 提前退出浮窗多发生在页面被隐藏、用户切换标签页或视频 ended 时，WebKit 会按系统策略把 PiP 还原为 inline。最后建议遵循的最佳实践是：始终做能力检测、始终把 PiP 作为增强体验而不是核心流程、始终同步网页与浮窗两端状态，并为 iOS 13 以下设备保留全屏播放回退。
综上，iPhone 浮窗网页的本质是「Safari + 系统画中画」的视频级浮层能力：工程上以 requestPictureInPicture() 为主、webkitSetPresentationMode() 兜底；体验上靠 Media Session 补全信息；产品上则要清楚它在 iPhone 上无法承载任意网页 DOM，只能围绕视频轨道做悬浮文章。
查看详情
查看详情
