Android 浏览器和 iOS Chrome 是不是支持全屏 API？

Posted 2023-05-06

【中文标题】Android 浏览器和 iOS Chrome 是不是支持全屏 API？

【英文标题】：Is the Fullscreen API supported in Android Browser and iOS Chrome?Android 浏览器和 iOS Chrome 是否支持全屏 API？

【发布时间】：2020-10-15 02:43:32

【问题描述】：

我有一个整页的 React 应用程序。我的意思是应用程序的宽度和高度占据了浏览器视口的宽度和高度。

我想在 android 浏览器或 ios Chrome 中隐藏地址栏。对于整页数据可视化应用程序来说，这是非常宝贵的空间。例如，在 iPhone XS 的横向模式下，地址栏占据了大约 14% 的屏幕垂直空间。

对于一个不能立即使用的 UI 来说，这是一个很大的空间，我想尽可能地隐藏起来。

我尝试使用Google Web developer documentation 通过非供应商特定功能隐藏地址栏，例如：

toggleFullScreen = () => 
  var doc = window.document;
  var docEl = doc.documentElement;

  var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
  var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;

  if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) 
    requestFullScreen.call(docEl);
  
  else 
    cancelFullScreen.call(doc);
  

这会导致调用requestFullScreen.call(docEl) 时引发错误，其中docEl 不存在。

我还在componentDidMount()中尝试了以下操作：

componentDidMount() 
  setTimeout(() => 
    window.scrollTo(0, 1);
  , 1000);

第二种方法不起作用，可能是因为我的应用程序的视口尺寸。它不会产生任何错误。但是，在应用程序 CSS 中增加高度也不起作用。

我尝试的第三种方法是在应用程序中添加meta 标签：

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

这似乎没有做任何事情。

作为最后的尝试，我在 iPhone 上的 iOS Chrome 上测试了https://sindresorhus.com/screenfull.js/，但它的演示页面显示不支持全屏 API。我还尝试了https://www.npmjs.com/package/toggle-fullscreen 和类似的 NPM 源包来访问全屏 API。它们似乎都不起作用，而且大多数似乎都发出类似于我在上面描述的toggleFullScreen 方法中遇到的错误。

是否有一种正确的、有效的方法来通过纯 javascript 调用隐藏地址栏，无需用​​户交互，或者 Android 浏览器/iOS Chrome 浏览器根本不支持全屏 API？

【问题讨论】：

他们在其他设备上工作过吗？

除了桌面 Chrome 内置的设备模拟器，我还有一个 iOS 设备可以测试。

您是否尝试在页面加载时使用它？这也可能是特定于浏览器的问题。尝试使用 MDN 和 Caniuse.com 看看是否支持全屏 API。

我正在尝试在 React 组件/应用程序安装时使用此方法，并调整超时以允许渲染 DOM。

Caniuse.com 表示支持全屏 API，但与供应商无关的对该 API 的调用会产生错误。我不确定该信任哪个来源，但它似乎在现实中不起作用。

【参考方案1】：

根据 MDN 网络文档（请参阅 https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen），您的问题“是否有一种正确的、有效的方法可以通过纯 JavaScript 调用隐藏地址栏，无需用​​户交互”，答案是没有。它明确指出，如果不从 ui 交互或设备方向更改调用它，它将失败。

如果您提到的其中一个浏览器在另一种情况下确实成功进入全屏（通过使用 requestFullScreen），则这是一个实现错误，不应依赖于在未来的版本中持续存在。

【参考方案2】：

全屏是用户必须请求的功能。

这是 Chrome 团队和任何支持全屏 API 的浏览器供应商的有意选择。所以试图调用 onLoad 是行不通的。您也许可以找到一些 React 库来让您的生活更轻松，但您至少需要添加一个按钮。

如果您要添加“全屏”按钮，您可能需要考虑更进一步...并让应用“可安装”。

其他选项：PWA

为什么不创建一个渐进式 Web 应用程序？如果您期望有一个似乎正是 PWA 旨在解决的体验的全屏实现。

此外，通过 PWA，您可以获得屏幕上的图标、后台更新、推送通知等应用。这是Google Developer's overview。 PWA 可在 Chrome、FF、IE、Edge 和 Safari 中使用（截至撰写本文时，90% 左右）。

要创建 PWA，您需要 define a web manifest file。这允许您设置图标、修改演示文稿等。

带有 JS 框架的 PWA

所有主要的 JS 框架都有帮助库，可以更轻松地构建 PWA。既然你正在使用 React 这个is the best overview I've seen。

也就是说，您实际上只需要一个清单文件并注册一个服务工作者即可开始使用。

Google PWA 帮助（代码实验室、文档等） React PWA Documentation Angular 官方PWA guide Vue CLI PWA Plugin

【参考方案3】：

我最近开发了一个简单的工具来显示意大利 covid-19 数据图表；您可以在this link 之后对其进行测试，而不是按 surface 链接。您可以查看repository自行查看。反正核心是here。

简短介绍：打开全屏（root 是 React.js 中根 DIV 的默认 ID）

document.getElementById("root").requestFullscreen( navigationUI: "hide" );

关闭全屏：

if(document.fullscreenElement) document.exitFullscreen();

我在 IOS 和 Android 上都对此进行了测试。

希望这会有所帮助。

【讨论】：

在 iOS Chrome 中，这会产生以下错误/异常：TypeError: document.getElementById("root").requestFullscreen is not a function. 在 Chrome 移动设备模拟器视口中，我看到以下错误/异常：Unhandled Exception (TypeError): fullscreen error。

在 iOS Chrome 上加载链接的站点并单击“表面”不会隐藏地址栏（它不会将浏览器切换到全屏模式）。

对不起@AlexReynolds，实际上我没有在 iOS Chrome 上测试过

环顾@AlexReynolds，它确实似乎还不支持，但作为标准，我建议您继续使用您的应用程序，而不是专注于此。他们很快就会整合它。

【参考方案4】：

function toggleFullscreen() 
  let elem = document.querySelector("div");// or other elements ...
  if (elem != null)
    if (!document.fullscreenElement) 
      elem.requestFullscreen().catch(err => 
        alert(`Error attempting to enable full-screen mode: $err.message ($err.name)`);
      );
     else 
      document.exitFullscreen();