记 iOS Safari 上无法使网页全屏展示的问题

2022-09-20 · 周二一般阵雨

今天又是修改 Bug 的一天,其中公司项目内的某个功能需要切换全屏展示的效果,排查后发现其实是 iOS Safari 上无法使用 FullScreen API。

// Safari
element.webkitRequestFullscreen(); // 进入全屏模式
document.webkitExitFullscreen(); // 退出全屏模式

// 其他正常浏览器
element.requestFullscreen();
document.exitFullscreen();

还有一个检查当前是否有全屏元素的 API,在 iOS 上均返回 undefined,网上也有不少关于这个问题的讨论,包括 Apple 论坛 以及 StackOverflow 上都明确比表示不能使用。只能说苹果在 Safari 的兼容性上确实就是大爷,你前端还不能不兼容。最终和产品那边确定后,将内容在窗口内“全屏”展示即可。

Paul

Paul

特立独行的一只前端菜狗。这篇日记编写大概耗时了 0 分钟,内容均为个人原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!如本站内容对你有所帮助的话,不妨 捐助支持 一下?

奇趣音乐盒技术源于 Kico Player
Emmm,这里是歌词君