javascript - iOS 渐进式 Web 应用程序深色模式启动图像?

标签 javascript html ios css progressive-web-apps

我正在尝试为我的 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。

最佳答案

您只需在每个图像下添加另一个 apple-touch-startup-image,并在媒体开头添加“(prefers-color-scheme: dark) 和”=""

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

关于javascript - iOS 渐进式 Web 应用程序深色模式启动图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57245380/

相关文章:

javascript - 仅在某些范围内滚动元素

javascript - 使用 javaScript/jQuery 显示/隐藏 html 表条目?

javascript - 如何实时更新网页?

html - 几个div标签如何只用CSS创建一个表格?

objective-c - iOS - SQLite 未更新但准备和步骤已成功执行

javascript - Object.keys 在 Internet Explorer 中不起作用

比较 sessionStorage 值时无法调用 Javascript 函数

javascript - 循环声音onclick只是

android - 如何为 iOS 和 Android 开发应用内更新?

ios - iPhone 应用程序的应用程序启动图像无法放大