糟糕的 <meta name="theme-color">

原文链接:糟糕的 ``
下面的就是全文了,只是论坛部分渲染和原文不同。

`` 是一个标准元数据,可以用来改变浏览器 UI 的颜色,具体效果可参照 MDN 的示例

在阅读了 Meta Theme Color and Trickery | CSS-Tricks 之后,我兴致勃勃地给博客主题加上了 ``,遇到了以下几个问题:

问题一

许多浏览器依旧不支持(测试日期 2026 年 3 月 15 日,均为当日能下载到的最新版本):

  • 安卓版 Chrome 支持(浅色模式且非无痕模式),但基于相同内核的安卓版 Edge 不支持。
  • 安卓版 Firefox 不支持,安卓版 Via 不支持。

问题二

不能使用自闭合标签,否则在安卓版 Chrome 上也会失效。这应该是一个安卓版 Chrome 的缺陷。


查看了 GitHubCSS-Tricks 这两个网站的实现,确认他们的 都不是自闭合标签。 有趣的是,电脑端和手机端的 Safari 对 的支持较好,但苹果官网未使用 ``。

许多格式化工具会自动添加标签末尾的 /,不经意间就变成了自闭合标签。甚至 MDN 的示例都是自闭合标签。

问题三

这是 Thymeleaf 暴露的一个问题(补充:也可能是 Halo CMS 导致的),我猜测源于它假定 meta 标签不会有相同的 contentthymeleaf 已经接近一年没有提交了,开发分支也有半年以上的时间没有提交了,这个问题修复也可能遥遥无期。

错误例 1


渲染结果(删除行表示渲染缺失):


错误例 2


渲染结果(删除行表示渲染缺失):


错误例 3


渲染结果(删除行表示渲染缺失):


总结

`` 发挥功能的场景主要在于 PWA 和手机端。自 CSS-Tricks 的那篇文章后已经过去了将近 5 个年头(4 年 8 个月),各家浏览器支持依旧不乐观。
上面几个问题都是很常见的使用场景,这些问题存在也不是一天两天了,可见这个元数据的冷门程度。我判断这个元数据被广泛支持仍然遥遥无期。

此话题已在最后回复的 60 天后被自动关闭。不再允许新回复。