将应用程序安装到主屏幕后,是否有解决方法可以帮助我在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或拉伸导航栏以使其可能占用整个空间的必要代码。
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/