时间戳

首页 > 解决方案 > (iOS) viewport-fit=cover 元标记不能完美地与导航栏配合使用

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

问题描述

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

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

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

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

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

标签： iosswiftaframemeta

解决方案

导航栏

你应该使用

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

对于工具栏前进动作，

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

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

推荐阅读