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

苹果最近发布了 Safari 浏览器的 15 版本,这个版本首先把地址栏移到底部,方便切换不同的标签页和输入网址,特别是对于大屏手机来说,可能一开始使用的时候会有点习惯问题,习惯性往上输入网址,习惯了之后,会特别方便。

Safari 15 支持顶部状态栏颜色

另外还有一个特别大的功能改进是支持设置顶部状态栏的颜色了,如「WordPress果酱」博客,设置了顶部状态栏颜色之后:

图片

WPJAM 加速服务介绍单页 http://wpjam.com/speed/ 设置了顶部状态栏颜色之后:

图片

这样设置之后感觉网页和浏览器整体融为一体,特别是 Safari 15 还支持下拉加载刷新,原生 APP 的感觉更明显:

另外桌面版的 Safari 浏览器也是支持这个功能,前提是 Mac 系统的 Safari 浏览器也要升级到 15:

图片

在手机上还好,可能有些人觉得在桌面上有点突兀,所以也是支持关闭的,在 Safari 浏览器的偏好设置里面选择「标签页」,然后将「在标签页栏中显示颜色」选项取消了即可:

图片

如何设置顶部状态栏颜色

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)">

其中的颜色值根据自己的需求修改。

如果对于 WordPress 站点,你不想修改主题的模板,那么你还可以通过更方便的方法来实现,安装 WPJAM Basic 插件之后,在 WordPress 后台,「WPJAM」主菜单下的「样式定制」的字菜单中,在前台 Head 代码中贴入这段代码即可:

图片

©我爱水煮鱼,本站推荐使用的主机:阿里云,国外主机建议使用BlueHost

本站长期承接 WordPress 优化建站业务,请联系微信:「chenduopapa」。

热门文章