美文网首页
设置网页在浏览器顶部状态栏的颜色

设置网页在浏览器顶部状态栏的颜色

作者: Mr老朝 | 来源:发表于2023-11-13 15:33 被阅读0次

如何设置顶部状态栏颜色

方式一、通过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打开才有效果，并且要页面滚动起来。

  • 页面没滚动没效果


    页面没滚动没效果

  • 页面滚动起来才有效果


    页面滚动起来才有效果

相关文章