Safari 上视频无法全屏这事儿，说穿了其实不复杂，但踩坑的人确实不少。最常见的原因就那么几个：

• video 标签忘了写 playsinline 和 webkit-playsinline。
• 全屏 API 没在用户点击时调用。
• 设备旋转锁定了。
• Safari 压根没给你全屏的权限。
• 另外还有个“歪招”——把网站添加到主屏幕，能绕过不少限制。

很多前端同学遇到的问题是：点击全屏按钮没反应，或者横屏之后画面还是窄窄一条。别急，咱们一个一个来解决。

检查并修正 video 标签的 HTML 属性

属性要求：必须同时带上两个 playsinline

iOS Safari 对视频全屏有个硬性要求： 标签上必须同时带上 playsinline 和 webkit-playsinline 两个属性。

注意：是 同时，少写一个都不行。而且必须在 HTML 源码里静态写死，别指望用 JavaScript 动态加——Safari 不认运行时注入的 webkit-playsinline。

修改方法：直接改 HTML 源码最保险

如果你用 Vue、React 这类框架，记得在模板里直接写死。不要在 mounted 或 useEffect 里用 setAttribute 追加。

还有一点特别容易翻车：playinline 别漏了字母 s，写成了 playinline 一样失效。

确保全屏调用由用户手势触发

Safari 有个“不讲理”的规则：requestFullscreen() 必须在用户手势事件里调用，比如 click、touchend。

如果你在异步回调、定时器或者 play 事件里调用，它会静默失败——控制台连个报错都不给你。

正确的做法就这几步：

• 第一步：全屏按钮绑定原生事件，别搞什么自定义事件链。
• 第二步：代码长这样才安全——button.addEventListener('click', () => { videoEl.requestFullscreen(); });
• 第三步：别在 autoplay 完成后的 play 事件里直接调用全屏，iOS 不认这个手势。
• 第四步：如果你之前用了 webkitEnterFullscreen()，赶紧换掉，这个 API 在 iOS 15+ 已经彻底废了。

关闭设备屏幕旋转锁定

iPhone 和 iPad 上，视频全屏其实依赖横屏。如果系统级的旋转锁定开了，页面根本没法横过来，全屏按钮也不会出现。

咋关？从屏幕右上角往下滑打开控制中心，找到带锁形图标的“屏幕旋转锁定”，点一下让它变灰就行。

然后把设备横过来拿，页面自动适配横屏——很多视频站（B站、腾讯视频这些）在横屏瞬间会自动进全屏或者弹出全屏按钮。

启用网站全屏权限

Safari 默认是禁止第三方网站调用全屏 API 的，得手动授权。这个设置卡了不少人——明明代码都对，就是没反应。

在 Safari 里打开你的视频页面，点地址栏左侧的锁形图标，选“网站设置”。

往下翻找到“全屏”选项，改成“允许”。刷新页面再试。

注意：如果你之前没访问过这个域名，Safari 可能直接跳过了这个设置，最好手动检查一遍。

绕过浏览器限制：添加到主屏幕

如果上面几招都试了还不灵，还有个终极大法：把网站“添加到主屏幕”。这样它就以独立 Web 应用的形式运行，不显示地址栏和工具栏，Safari 对全屏 API 的限制也会被绕过去不少。

操作很简单：

• 在 Safari 里打开视频网站，播放一个视频确认基础功能正常。
• 然后点底部分享按钮（方框加向上箭头），选“添加到主屏幕”。
• 命名后点“添加”。
• 回到主屏幕，点新图标打开网站，再播放视频——这时候全屏按钮会更稳定，响应也更快。

《夸克》非常好用的免费AI浏览器

下载APP查看