如何设置顶部状态栏颜色
方式一、通过meta
顶部状态栏的颜色这个功能是通过使用的 theme-color 这个 meta 标签来实现的。只要你在你的网页的头部加入下面这行代码即可:
<meta name="theme-color" content="#0a1992">
IOS切换显示模式浅色或者深色,希望两种模式设置的顶部状态的颜色不同,可以加入一下两行代码:
<meta name="theme-color" content="#1972F8" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1C4D98" media="(prefers-color-scheme: dark)">
兼容性
页面兼容性方式二、通过修改body颜色
注意,如果是通过JS动态修改body的背景色,那么是不会让状态栏变背景色的!
body{
background: gray;
}
方式三、在页面顶部的元素修改
- 首先添加公共样式:
#top {
position: fixed;
width: 100%;
left: 0px;
top: 0px;
background: #176dd4;
z-index: 999;
}
- 当顶部只有一个元素的时候
<div id="top">
<p>top-当top中只有一行p元素的时候</p>
</div>
发现safari顶部状态栏的背景色变化了!
- 把p换成div
<div id="top">
<div>top-当top中只有一行div元素的时候</div>
</div>
状态栏背景色没了
- 保持p标签不变,添加样式:
*{padding: 0;margin: 0;}
状态栏背景色没了
所以得出结论:safari的顶部背景色,如果需要通过固定在顶部的元素背景控制的话,需要的条件有很多,而且后续苹果会不会修复这个问题都不确定,不推荐使用。
注意点
IOS手机要默认浏览器safari打开才有效果,并且要页面滚动起来。
-
页面没滚动没效果
页面没滚动没效果 -
页面滚动起来才有效果
页面滚动起来才有效果
网友评论