（iOS）viewport-fit=cover 元标签与导航栏的配合不完美

Question

我正在制作一个使用 AFrame 的 iOS 应用程序，它是一个基于 Web 的 3D 图形库。当我加载包含aframe场景的网页时，我发现网页视图没有全屏。经过搜索，我承认这是由于 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) 显示了在我的应用程序中加载 aframe 场景与 iPad Pro Gen 4 上的 safari 的比较。图 (b) 显示了仅带有视口元标记和红色背景 div 标记的简化场景。

如何让我的应用程序像 safari 一样工作？

Answer 1

导航栏

你应该使用

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

---

对于工具栏向前操作，

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

---

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