如何在 iOS 上制作一个基于 Web 的 Flutter 应用程序全屏答案

【问题标题】：How to make a web-based Flutter application fullscreen on iOS如何在 iOS 上制作一个基于 Web 的 Flutter 应用程序全屏
【发布时间】：2022-01-11 13:02:11
【问题描述】：

我有一个基于 Web 的 Flutter 应用程序，单击一个按钮后，我想让应用程序全屏显示。我为此使用以下代码sn-p

import 'dart:html';
            
if (document.documentElement == null) {
   print("DEBUG document.documentElement == null");
} else {
   document.documentElement.requestFullscreen();
}

此代码在 Linux 上的 Chrome、Mac 上的 Safari、Android 上运行良好，但在 iOS (15.1) 上运行良好。我收到以下错误

NoSuchMethodError: method not found: 'webkitRequestFullscreen' (s.webkitRequestFullscreen is not a function. (In 's.webkitRequestFullscreen()', 's.webkitRequestFullscreen' is undefined))

关于如何在 iOS 上运行此功能的任何想法/提示？

【问题讨论】：

标签： ios iphone flutter flutter-web webkitrequestfullscreen

【解决方案1】：

这是由于 iOS Safari 没有全屏 API。我相信这个问题只出现在 iphone 上而不是 ipad 上。一种解决方法是添加底线。但它仍然只有在页面作为书签从主屏幕启动时才有效。

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

欲了解更多信息，请查看以下链接-

https://developers.google.com/web/fundamentals/native-hardware/fullscreen#request_the_browser_go_fullscreen_in_response_to_a_user_gesture

https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#element.requestfullscreen

【讨论】：