时间戳

首页 > 解决方案 > 如何在 Bootstrap 中设置 iOS 状态栏背景颜色？

ios - 如何在 Bootstrap 中设置 iOS 状态栏背景颜色？

问题描述

将应用程序安装到主屏幕后，是否有一种解决方法可以帮助我在 iOS 设备上的 PWA 状态栏中模仿背景颜色？

我目前已将 apple-mobile-web-app-status-bar-style 元标记设置为“黑色半透明”，而不是适用于 iOS 的其他两个选项“黑色”和“白色”。我这样做是因为我可能想在状态栏下方放置一个正确颜色的 div (#2e0c2a)，这会使状态栏看起来实际上是那种颜色。

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

我希望得到一个状态栏，它是我的导航栏 (#2e0c2a) 的颜色，就像左边的图像一样，但实际发生的是内容只是在半透明状态栏后面移动并且显示不正确。我不知道创建一个只出现在状态栏后面的 div 或拉伸导航栏以占用整个空间需要什么代码。

期望 V. 实际

标签： iostwitter-bootstrapsafariios7-statusbar

解决方案

添加此元标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

然后加：

padding: env(safe-area-inset-top);

到您在 css 中的导航栏样式（或您希望看到的任何元素占用 iPhone X 状态栏的空间。

希望这可以帮助！

推荐阅读