logo标签列表

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

javascriptandroidcssiosgoogle-chrome
4
我有一个全屏React应用程序。我的意思是应用程序的宽度和高度占据了浏览器视口的宽度和高度。
我想在Android浏览器或iOS Chrome中隐藏地址栏。对于全屏数据可视化应用程序来说，这是非常有价值的空间。例如，在iPhone XS的横向方向上，地址栏大约占据了屏幕垂直空间的14％。
对于一个不立即有用的UI元素来说，这是很多的房地产，我希望将其隐藏起来。
我尝试使用Google Web开发人员文档通过非供应商特定的函数隐藏地址栏，例如：
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 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调用隐藏地址栏，而不需要用户交互，或者Fullscreen API在Android浏览器/iOS Chrome浏览器上根本不受支持？

他们在其他设备上工作了吗？ - shreyasm-dev
除了桌面版Chrome内置的设备模拟器外，我还有一台iOS设备可供测试。 - Alex Reynolds
你是在页面加载时尝试使用它吗？这也可能是浏览器特定的问题。尝试使用 MDN 和 Caniuse.com 查看是否支持全屏 API。 - shreyasm-dev
我正在尝试在React组件/应用程序挂载时使用此方法，并调整超时时间以允许DOM呈现。 - Alex Reynolds
Caniuse.com 表示支持 Fullscreen API，但针对该API的跨厂商调用会产生错误。我不确定该信任哪个来源，除了在现实中似乎不起作用。 - Alex Reynolds
显示剩余2条评论
4个回答
3
你的问题是：'是否有一种正确、可行的方法通过纯JavaScript调用隐藏地址栏，而不需要用户交互'。根据MDN webdocs的说法（请参见https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen），答案是否定的。它明确指出，如果它不是从UI交互或设备方向更改中调用的话，它将失败。
如果你提到的浏览器之一成功地进入全屏模式（使用requestFullScreen）在其他情况下，那么这是一个实现错误，不应依赖于未来版本。
3

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

这是来自Chrome团队和支持Fullscreen API的任何浏览器厂商的有意选择。因此，尝试在onLoad中调用它是行不通的。您可能能够找到一些React库来简化您的生活，但至少需要添加一个按钮。

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

另一种选择：PWA

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

此外，使用PWA，您可以在屏幕上获得类似应用程序的图标、后台更新、推送通知等功能。 这里是Google开发人员概述。 PWA在Chrome，FF，IE，Edge和大多数Safari中运行（截至撰写本文时约占90%）。

要创建PWA，您将需要定义Web清单文件。这允许您设置图标、修改演示方式等。

使用JS框架的PWA

所有主要JS框架都有协助库，可使构建PWA变得更加容易。由于您正在使用React，因此这是我见过的最好概述。

尽管如此，您只需要一个清单文件和注册服务工作者即可开始。

0

我最近开发了一个简单的工具来展示意大利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. - Alex Reynolds
在iOS Chrome上加载您的链接网站并单击“surface”不会隐藏地址栏（它不会将浏览器切换到全屏模式）。 - Alex Reynolds
抱歉 @AlexReynolds，实际上我没有在iOS Chrome上测试过它。 - Daniele Ricci
环顾四周，@AlexReynolds，似乎还不支持这个功能，但是考虑到这是标准，我建议你继续开发你的应用程序，而不是将重点放在这个上面。他们很快就会集成它的。 - Daniele Ricci
0
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();
    }
  }
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接