(iOS) viewport-fit=cover meta tag works imperfectly with bars for navigation

Question

I am making an iOS application working with AFrame that is a web-based 3D graphic library. When I load a web page that contains an aframe scene, I found that the web view does not have a full screen. After searching, I acknowledged that is due to the <meta name="viewport" content="viewport-fit=cover"> tag automatically injected by the AFrame library. I created a sample project to demonstrate this phenomenon, check here: https://github.com/nfyfamr/WKWebView-Full-Screen-Test.

My application has a few constraints. I want to solve this issue under the constraints.

1. The bars for navigation (navigation bar and tool bar) should appear for displaying web page navigation controls such as going prev/next page button or URL navigation.
2. WKWebView's layout should be identical to the root view. I want to make the webview overlapped by bars for navigation like the iOS Safari browser does.

Next images (a) and (c) show the comparison of loading an aframe scene in my app and safari on iPad Pro Gen 4. The image (b) shows the simplified one only with a viewport meta tag and red background div tag. Comparison of my app and safari

How can I make my app to work like safari?

Answer 1

The bars for navigation

u should use

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

---

for tool bar forward action,

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

---

u should add other UI / actions yourself