1

我们正在开发一个 react 应用程序，它将通过 iOS webview 在 iOS 应用程序上使用。问题是iOS状态栏被app设置为透明，所以当用户滚动页面时，页面内容显示在状态栏下方。有什么方法可以从我们的反应应用程序而不是 iOS 应用程序控制该部分？

我们尝试通过苹果元标记设置状态栏颜色，但没有成功。

<meta name="apple-mobile-web-app-status-bar-style" content="black">

4

2 回答 2

1

您不能从嵌入式 Web 应用程序覆盖主机应用程序的状态栏颜色。
您的问题中提供的元标记仅在用户导航到您的网络应用程序的网址后使用 Safari 中的“导出”按钮将您的网络应用程序添加到他的仪表板时才有效。

于 2019-09-04T11:18:41.113 回答
1

我不知道这个技巧是否有效，但您可以通过在页面正文的负面部分制作固定空白来制作假状态栏，例如：

.ios-status-bar:before {
    content: "";
    position: fixed;
    z-index: 10000;
    top: -100px;
    height: 100px;
    right: 0;
    left: 0;
    background-color: #fff;
}

当用户设备是 iOS 时，将其分配给 body，如下所示：

const isIOS = navigator.userAgent.match(/OS/i) != null;
if (isIOS)
  document.body.classList.add('ios-status-bar');
于 2019-09-05T21:56:09.443 回答