在 iOS 上的 Safari 中全屏打开网页

Posted 2023-03-14

【中文标题】在 iOS 上的 Safari 中全屏打开网页

【英文标题】：Open webpage in fullscreen in Safari on iOS

【发布时间】：2013-05-10 15:40:01

【问题描述】：

ios 上的 Safari 有一个全屏模式。是否可以通过 javascript 或类似方式激活它？

谢谢

【问题讨论】：

当您的页面具有“apple-mobile-web-app-capable”元标记，并且它是从设备“桌面”上的图标启动时，就会发生这种情况。

反对者请解释

【参考方案1】：

不，无法使用 javascript 在 iOS 上的 Safari 中切换全屏模式。

为了让网页以全屏模式运行，您需要添加以下元标记，并且该页面需要从主屏幕上的书签开始：

<meta name="apple-mobile-web-app-capable" content="yes">

但是，您可以使用只读属性检测页面是否以全屏模式运行：

window.navigator.standalone

【讨论】：

developer.apple.com/library/content/documentation/…

在我的测试中 window.navigator.standalone 在全屏模式和非全屏模式下总是控制台错误。它的无效答案。

浏览书签路线对我不起作用，但单击共享按钮，然后“添加到主屏幕”可以。一旦我从“桌面”打开，它就会进入全屏模式。

看起来一旦你处于全屏模式就无法摆脱它了？

【参考方案2】：

在 iOS >= 12 之后，只有通过 Safari 中的原生 API 切换到全屏的方法。

    if (document.webkitFullscreenElement) 
      document.webkitCancelFullScreen();
     else 
      const el = document.documentElement;
      el.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    

【讨论】：

该文档在我的 iPhone 上没有全屏功能。在调试控制台中：javascript (() => var keyz = []; for(var k in document) keyz.push(k); return keyz )().filter(k => /fullscreen/i.test(k)) 返回[]

恐怕在 iOS 14.3 上我也看不到。

我相信这只适用于 iPad，不适用于 iPhone。在此处查看 iOS Safari 的注释：caniuse.com/?search=fullscreen

似乎不适用于 iPad iOs 14.4.2

仅适用于 iPad 且仅适用于 <video> 元素。