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

标签 ios twitter-bootstrap safari ios7-statusbar

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

我目前已将 apple-mobile-web-app-status-bar-style 元标记设置为“black-translucent”,而不是 iOS 可用的其他两个选项“black”和“white”。我这样做是因为我想在状态栏下方放置一个 div,该 div 的颜色是正确的 (#2e0c2a),并且这将使状态栏看起来实际上就是该颜色。

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

我希望得到一个与我的导航栏 (#2e0c2a) 颜色相同的状态栏,如左图所示,但实际发生的情况是内容只是移动到半透明状态栏后面并且显示不正确。我不知道需要什么代码来创建一个仅出现在状态栏后面的 div 或拉伸(stretch)导航栏以使其占据整个空间。

Desired V. Actual

最佳答案

添加此元标记:

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

然后添加:

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

CSS 中的导航栏样式(或者您希望看到的任何元素占据 iPhone X 状态栏的空间。

希望这对您有所帮助!

关于ios - 如何在Bootstrap中设置iOS状态栏背景颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57245256/

相关文章:

iphone - 在iphone本地存储数据

ios - react-native 中的 BottomTabNavigator 上方的白线

html - Bootstrap 导航栏在带有表格的页面上太短

javascript - Rails 尝试从不正确的位置加载资源

javascript - Rails 简单形式 Bootstrap Javascript

css - 为什么我的 CSS 动画在 Safari 中不起作用

javascript - 具有自定义功能的 window.opener 在 Safari 中不起作用

javascript - Safari 推送通知 Pushmanager 无法注册

ios - 不考虑时间比较 NSDates

ios - Artefacts 在 Swift Xcode 中画线