如何保证Web App在iOS上全屏扩展？

Question

问题

我正在开发一个 Web 应用程序，并面临着使其在 iOS 设备上扩展到全屏的问题。

window.Telegram.WebApp.expand()

方法在Android设备上可以正常工作，但在iOS设备上，屏幕底部仍然有空白。

代码

这是我用来尝试全屏扩展的代码：

if (window.Telegram && window.Telegram.WebApp) {
  const webApp = window.Telegram.WebApp;
  webApp.expand();
}

Web 应用程序应展开以填满 iOS 设备上的整个屏幕，底部没有空白。

我尝试过的事情

我已经验证了

window.Telegram.WebApp.expand()

在 Web 应用程序加载后被调用。 我在多个 iOS 设备和浏览器上进行了测试。 我已经检查了任何可能影响布局的 CSS 或 HTML 问题。

其他背景

iOS Version: [iOS 16.1]
Telegram App Version: [8.5.0]
Browser: [Browser used on iOS, e.g., Safari]
Device Type: [iPhone 12]

问题

• iOS 上的 u200du200du200du200du200du200du200du200du200du200d

  window.Telegram.WebApp.expand()

  是否存在导致 Web 应用程序无法完全展开的已知问题？
• 是否有任何替代方法或最佳实践来确保 Telegram Web 应用程序完全占据 iOS 上的屏幕？
• iOS 是否需要任何额外配置才能正确处理全屏扩展？

Answer 1

如果您使用 ReactJS，请使用 @twa-dev/sdk 库

然后，在您的 App.tsx 或 Main 文件中，像这样使用它：

import WebApp from '@twa-dev/sdk';
....
  React.useEffect(() => {
   const initWebApp = async () => {
    WebApp.ready(); // Wait for the WebApp to be ready
    WebApp.expand(); // Expand the WebApp to full screen
  };

  initWebApp();
}, []);