iOS Progressive Web App 暗模式启动图像？

Posted 2023-03-14

【中文标题】iOS Progressive Web App 暗模式启动图像？

【英文标题】：iOS Progressive Web App Dark Mode Startup Image?

【发布时间】：2019-07-28 22:18:31

【问题描述】：

我正在尝试为我的 ios PWA 的 apple-touch-startup-image（启动画面）创建一个深色模式选项，如果开启深色模式，那么它将替换 apple-touch- 的所有链接为我的用户将启动图像设置为暗模式。

我已经考虑过了，因为深色模式适用于 css：

@media(prefers-color-scheme: dark) ... 

那么它可以很容易地替换它们。

我创建了这个 javascript，但它似乎不起作用：

var darksplash = window.matchMedia( "(prefers-color-scheme: dark)" );
if (darksplash.matches) document.querySelector('link[rel="apple-touch-startup-image"]').setAttribute("href", "assets/images/splashscreens/dark.png");

有什么想法吗？我在想这可能是 javascript 代码中的错误，我不是最擅长 JavaScript。

【问题讨论】：

您的代码看起来像什么不起作用？请提供一个 Minimal, Complete, and Verifiable example 来证明该问题。

【参考方案1】：

您只需要在每个图像下添加另一个 apple-touch-startup-image，在 media="" 开头添加 "(prefers-color-scheme: dark) 和 "

发现于： https://github.com/onderceylan/pwa-asset-generator/issues/51

【参考方案2】：

我对 css 或 javascript 不太了解，但如果我注入的代码不起作用，我会尝试在 web 控制台中运行 JavaScript 代码。

在 chorme 中打开您的网站，右键单击并单击 Inspect 框顶部有一个选项，选择控制台。 运行您的 JavaScript 代码。

如果可行，则可能是您注入 JavaScript 代码的时机不合适，或者您的 JavaScript 代码出错。