gpt4 book ai didi

ios - 尽管遵循以下说明,PWA iOS Splash 仍未显示

转载 作者:可可西里 更新时间:2023-11-01 05:42:46 28 4
gpt4 key购买 nike

我正在制作一个 PWA,我正在尝试显示启动画面。我正在学习本教程:

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

确认了这一点:

https://www.netguru.co/codestories/few-tips-that-will-make-your-pwa-on-ios-feel-like-native

我的 index.html 中的代码是这样的:

    <meta name="apple-mobile-web-app-capable" content="yes">   
<link rel="apple-touch-startup-image" sizes="2048x2732" href="splash/apple_splash_2048.png"/>
<link rel="apple-touch-startup-image" sizes="1668x2224" href="splash/apple_splash_1668.png"/>
<link rel="apple-touch-startup-image" sizes="1536x2048" href="splash/apple_splash_1536.png"/>
<link rel="apple-touch-startup-image" sizes="1125x2436" href="splash/apple_splash_1125.png"/>
<link rel="apple-touch-startup-image" sizes="1242x2208" href="splash/apple_splash_1242.png"/>
<link rel="apple-touch-startup-image" sizes="750x1334" href="splash/apple_splash_750.png"/>
<link rel="apple-touch-startup-image" sizes="640x1136" href="splash/apple_splash_640.png"/>
<link rel="apple-touch-startup-image" sizes="2048x1536" href="splash/apple_splash_2048.png"/>
<link rel="apple-touch-startup-image" sizes="640x960" href="splash/apple_splash_640x960.png"/>
<link rel="apple-touch-startup-image" sizes="320x480" href="splash/apple_splash_320.png"/>
<link rel="apple-touch-startup-image" sizes="1024x768" href="splash/apple_splash_1024x768.png"/>
<link rel="apple-touch-startup-image" sizes="2208x1242" href="splash/apple_splash_2208x1242.png"/>
<link rel="apple-touch-startup-image" sizes="768x1024" href="splash/apple_splash_768x1024.png"/>
<link rel="apple-touch-startup-image" sizes="2048x1536" href="splash/apple_splash_2048x1536.png"/>

这一切都在主 .html 索引文件的 header 中,它作为整个应用程序的模板。就像我做图标一样,它在 iOS 上工作。 splash 版本没有(所有图标都在 splash 文件夹下的同一目录中)。我做错了什么?

亲切的问候,

格热戈日

最佳答案

工作答案,截至 2020 年 3 月

无需手动指定单独的标签来添加所需的启动画面和触摸图标,pwacompat包(由 Google Chrome 团队开发),将允许您轻松生成 iOS 设备上的 PWA 支持所需的 Assets (启动图像和触摸图标)。

安装:

npm i pwacompat

这将确保即使在不兼容的设备/浏览器中也能支持您的 PWA,而无需在文档的 <head> 上手动指定链接标签。 .更具体地说,对于 Safari,pwacompat 包将执行以下操作:

  • Sets apple-mobile-web-app-capable (opening without a browser chrome) for display modes standalone, fullscreen or minimal-ui
  • Creates apple-touch-icon images, adding the manifest background to transparent icons: otherwise, iOS renders transparency as black
  • Creates dynamic splash images, closely matching the splash images generated for Chromium-based browsers

您可以在他们的 documentation 上阅读更多关于该软件包的信息.

关于ios - 尽管遵循以下说明,PWA iOS Splash 仍未显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51329040/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com