我终于找到了 safari26 工具栏背景色的识别方法

10 天前
 jaminq

tahoe 升级以来,safari 去掉了 compact tab 模式的背景,原来 <meta> 的 theme-color 在 macos 上也不再生效。

参考网上没有找到任何有用的信息,不论是 reddit 还是 AI 给的答复都是直接修改 body 的背景色,但是我发线一些网站(例如[ea.com](EA 官网))就完全没有使用 body 的背景色,于是我尝试了下,找到了让 safari 26 识别背景色的最小配置。

html 代码如下

<html>

<head>
    <style>
        div {
            min-height: 6px;
            position: fixed;
            top: 0;
            width: 80%;
        }
    </style>
</head>

<body style="background-color: beige;">
    <div style="background-color: darkgrey;"></div>
</body>

</html>

其中 height 最小 6pxwidth 最小 80%positiontop必不可少,更新于 safari26.0.1 ,后续苹果更新此方法可能失效。

BTW, 关掉在 safari 配置中 tab 的 Show color in tab bar 可以关掉改功能。

351 次点击
所在节点    前端开发
0 条回复

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1164112

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX