如何在iOS webview中控制iOS状态栏背景色

Question

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

我们尝试通过 apple meta 标签设置状态栏颜色，但没有成功。

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

Answer 1

您无法从嵌入式网络应用覆盖主机应用状态栏的颜色。
仅当用户在导航到您的网络应用程序的 url.

后使用 Safari 中的 "export" 按钮将您的网络应用程序添加到他的仪表板时，您问题中提供的元标记才会起作用

Answer 2

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

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

并在用户设备为 iOS 时将其分配给正文，如下所示：

const isIOS = navigator.userAgent.match(/OS/i) != null;
if (isIOS)
  document.body.classList.add('ios-status-bar');

如何在iOS webview中控制iOS状态栏背景色

How to control iOS status bar background color in iOS webview

javascript

ios

reactjs

ios-web-app

progressive-web-apps