(iOS) viewport-fit=cover 元标记不能完美地与导航栏配合使用

Question

我正在制作一个使用AFrame 的iOS 应用程序，它是一个基于Web 的3D 图形库。当我加载包含an aframe scene 的网页时，我发现网页视图没有全屏显示。经过搜索，我承认这是由于 AFrame 库自动注入了<meta name="viewport" content="viewport-fit=cover"> 标签。我创建了一个示例项目来演示这种现象，请查看：https://github.com/nfyfamr/WKWebView-Full-Screen-Test。

我的应用程序有一些限制。我想在约束下解决这个问题。

1. 应该出现导航栏（导航栏和工具栏）以显示网页导航控件，例如上一页/下一页按钮或 URL 导航。
2. WKWebView 的布局应该与根视图相同。我想让 webview 与 iOS Safari 浏览器一样的导航栏重叠。

下图 (a) 和 (c) 显示了在我的应用程序中加载框架场景和在 iPad Pro Gen 4 上加载的比较。图像 (b) 显示了仅带有视口元标记和红色背景 div 的简化场景标签。 Comparison of my app and safari

如何让我的应用像 Safari 一样运行？

Answer 1

导航栏

你应该使用

<form>
  <input type="text" placeholder="Search.." name="search">
</form>

---

用于工具栏前进动作，

<script>
    function goForward() {
        window.history.forward();
    }
</script>

---

您应该自己添加其他 UI / 操作