设置网页在Safari15浏览器顶部状态栏的颜色
设置safari顶部状态栏颜色
苹果最近发布了 Safari 浏览器的 15 版本，这个版本首先把地址栏移到底部，方便切换不同的标签页和输入网址，特别是对于大屏手机来说，可能一开始使用的时候会有点习惯问题，习惯性往上输入网址，习惯了之后，会特别方便。
另外还有一个特别大的功能改进是支持设置顶部状态栏的颜色了，设置了顶部状态栏颜色之后：
这样设置之后感觉网页和浏览器整体融为一体，特别是 Safari 15 还支持下拉加载刷新，原生 APP 的感觉更明显【左上1图】。
另外桌面版的 Safari 浏览器也是支持这个功能，前提是 Mac 系统的 Safari 浏览器也要升级到 15：
经过我测试，实现的方式主要有3种：
通过safari私有meta
Safari 15 顶部状态栏的颜色这个功能是通过使用的 theme-color 这个 meta 标签来实现的。只要你在你的网页的头部加入下面这行代码即可：
<meta name="theme-color" content="#0a1992">如果你的网页支持暗黑模式，希望两种模式设置的顶部状态的颜色不同，可以加入一下两行代码：
<meta name="theme-color" content="#1972F8" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1C4D98" media="(prefers-color-scheme: dark)">其中的颜色值根据自己的需求修改。
在safari中打开：http://code.wubin.work/code/css/safari-status-bg/ios-safari-meta.html
通过修改body颜色
先用safari看效果：http://code.wubin.work/code/css/safari-status-bg/ios-safari-body.html
注意，如果是通过JS动态修改body的背景色，那么是不会让状态栏变背景色的！
body{
background: gray;
}在页面顶部的元素修改
这个是最麻烦的一种情况，跟bug一样。
首先看公共样式：
#top {
position: fixed;
width: 100%;
left: 0px;
top: 0px;
background: #176dd4;
z-index: 999;
}当顶部只有一个元素的时候：
<div id="top">
<div>top-当top中只有一行div元素的时候</div>
</div>safari打开效果：http://code.wubin.work/code/css/safari-status-bg/ios-top-div-1.html
发现顶部背景色不会变化，然后我们在#top中继续添加元素。
当顶部包含2个以及多个元素的时候：
<div id="top">
<div>top-当top中有两个元素的时候，会将底部状态栏变色</div>
<div>只有当top中有两个及以上的元素，且元素非浮动的状态下，才会让顶部状态栏显示top的css定义的颜色</div>
<div>开始只有一个元素，动态动态添加的元素无效，只有开始就写在top中的才有效。</div>
<div>当动态隐藏后，顶部状态栏依然会显示top的css背景色。</div>
</div>safari打开效果：http://code.wubin.work/code/css/safari-status-bg/ios-top-div-2.html
发现当元素增多的时候，safari顶部状态栏的背景色变化了！
这时候，当我将第一个例子改一下：
<div id="top">
<p>top-当top中只有一行p元素的时候</p>
</div>此时我不重置浏览器的默认样式，发现这时候的状态栏背景色也变了！！
safari效果：http://code.wubin.work/code/css/safari-status-bg/ios-top-div-p.html
如果这时候我们将所有元素的margin和padding都去掉，再来看效果：
添加样式：
*{padding: 0;margin: 0;}safari效果：http://code.wubin.work/code/css/safari-status-bg/ios-top-div-p-1.html
发现又变回去了！！
所以得出结论：safari的顶部背景色，如果需要通过固定在顶部的元素背景控制的话，需要的条件有很多，而且后续苹果会不会修复这个问题都不确定，还是推荐使用第一种方式解决吧！
当然，经过测试，如果各种效果一起使用，其显示优先级为：方法1>方法3>方法2
目录