logo标签列表

iOS PWA启动画面？

iossplash-screenprogressive-web-apps
7
关于PWA启动画面，人们认为在https://pwa-splash.now.sh/和https://medium.com/@applification/progressive-web-app-splash-screens-80340b45d210上的代码是最新且兼容设备的方式吗？还是有人发现了问题并进行了修改？
以下是代码：
<link rel="apple-touch-startup-image" href="images/splash/launch-640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1536x2048.png" media="(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-1668x2224.png" media="(min-device-width: 834px) and (max-device-width: 834px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="images/splash/launch-2048x2732.png" media="(min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)">

更新 1：

针对下面 Robinyo 的回答，就上述第一个例子作出回应：

<link rel="apple-touch-startup-image" href="images/splash/launch-640x1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">

以下行需要添加以适应横向屏幕吗？
<link rel="apple-touch-startup-image" href="images/splash/launch-**1136x640**.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: **landscape**)">

也许我错了，但我不确定 iOS PWA 是否能够处理它。原因是因为我阅读到在创建应用（添加到主屏幕）时，iOS 会选择一张 png 并将其存储在本地。因此下次打开 PWA 应用程序时，它会先使用该本地图像，然后再尝试连接到网络。所以我想知道的问题是，iOS 是否会在本地存储两个图像，一个是竖屏的，一个是横屏的。

对于任何需要的人，我使用了这个生成器：https://appsco.pe/developer/splash-screens 来制作我的启动画面，但是它忘记在为你生成的代码中添加这个尺寸：(device-width: 414px) 和 (device-height: 736px)。 - Nick Chubb
5个回答
6
对于仍然在疑惑的人，我创建了一个免费工具生成所有尺寸的iOS启动画面（截至2022年4月有26个），以及所有必要的元标记（包括纵向和横向）。
目前，它支持最新的iPhone 13 Pro Max等所有屏幕尺寸。在Browserstack上测试过每一款iPhone和iPad。
此帖中提到的appsco.pe链接没有为最新设备提供启动画面，并且缺少横向版本。
该工具本身是免费使用的，但它共享我用于商业产品的相同代码，因此按设计，它应始终保持最新状态。
您的测试有没有注意到 https://github.com/onderceylan/pwa-asset-generator/issues/93 ？ - user1946932
1
它确实发生了。但我认为除了等待苹果最终修复它之外，没有任何可能的解决方法。 - Kevin Basset
1
这个工具对我很有效，谢谢！其他我用过的工具没有生成所需的全部图像。 - Vegeta ZA
3
截至2019年4月30日，https://gist.github.com/EvanBacon/7fd4dc3be3d00096579bb0b134c56ec7可以正常运行（已在iPad Pro 11英寸，iPhone XS Max上测试，包括竖屏和横屏）。 更新于2020年11月12日： （我还没有在列出的2020设备中进行测试。如果有人测试过，请随时提供建议。）
<!-- Apple Launch Screen Start -->
<link rel="apple-touch-startup-image" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/pages/splash-screen/images/1.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/pages/splash-screen/images/2.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/pages/splash-screen/images/3.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pages/splash-screen/images/4.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/pages/splash-screen/images/5.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/pages/splash-screen/images/6.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/pages/splash-screen/images/7.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/pages/splash-screen/images/8.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/pages/splash-screen/images/9.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/pages/splash-screen/images/10.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/pages/splash-screen/images/11.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/pages/splash-screen/images/12.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pages/splash-screen/images/13.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pages/splash-screen/images/14.png">
<link rel="apple-touch-startup-image" media="screen and (width: 834px) and (height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/pages/splash-screen/images/15.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pages/splash-screen/images/16.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pages/splash-screen/images/17.png">
<link rel="apple-touch-startup-image" media="screen and (width: 834px) and (height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pages/splash-screen/images/18.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/pages/splash-screen/images/19.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pages/splash-screen/images/20.png">

<!-- 2020 Start -->
<link rel="apple-touch-startup-image" media="screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pages/splash-screen/images/21.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/pages/splash-screen/images/22.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/pages/splash-screen/images/23.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/pages/splash-screen/images/24.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/pages/splash-screen/images/25.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/pages/splash-screen/images/26.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 360px) and (device-height: 780px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/pages/splash-screen/images/27.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 360px) and (device-height: 780px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/pages/splash-screen/images/28.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/pages/splash-screen/images/29.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/pages/splash-screen/images/30.png">
<!-- 2020 End -->

<!-- Apple Launch Screen End -->
1
我也在寻找正确的方法来做到这一点。看起来这是最新的工作代码，但设备宽度属性已被弃用了吗？https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width - Shnigi
@Shnigi 尽管 Mozilla 表示可以使用宽度（width）代替设备宽度（device-width），但我尝试过后发现在 2020 年 11 月的更新中并不适用。我的 11 英寸 iPad Pro 没有识别它，只显示了一个白屏。 - user1946932
@Shnigi 顺便说一句，width 是用来暂时不使用那行代码的，因为 https://github.com/onderceylan/pwa-asset-generator/issues/93。 - user1946932
1

为了快速测试，请访问ios-splash-screen-with-generate-link-tag生成您的启动画面以及自动生成的链接标签，

您的链接标签应该包含orientation，如下所示：

<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/apple-launch-1125x2436.png">
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-launch-750x1334.png">
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/apple-launch-1242x2208.png">
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-launch-640x1136.png">
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-launch-1536x2048.png">
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-launch-1668x2224.png">
<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-launch-2048x2732.png">

此外，请确保设置了这些标题标签。
  <link rel='apple-touch-icon' href='/pwa/512.png'> 
  <meta name="apple-touch-fullscreen" content="yes"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-title" content="your_title">

请确保在上述 href 属性中使用正确的路径！

0
关键时刻是要设置所有正确分辨率的闪屏。 同时，不要在没有media的情况下使用link rel="apple-touch-startup-image"。如果此标签在所有带有media的对应项之后，则将用于所有分辨率。但是，如果屏幕分辨率与图像分辨率不同，则会跳过配置。
不要将device-width更改为width。媒体中的screen并非必需。 px是分辨率的义务。
例如，对于iPhone 13 Pro Max，需要：
    <link rel="apple-touch-startup-image" 
        media="(device-width: 428px) and (device-height: 926px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" 
        href="/ios-launchimage-1284-2778.png"
    />

launchimage-1284-2778.png 必须具有 (1284像素，2778像素) 的纵向分辨率。

0

苹果每年都会推出不同屏幕尺寸的新设备，而我网站的部分的标签数量也在不断增加。因此，我编写了这个简单的脚本（iosPWASplash），可以根据屏幕尺寸使用Canvas自动生成启动画面，并将其添加到页面中。

您只需要提供一个图标文件（最好是512x512的PNG文件）和一个背景颜色。

以下是一些示例代码：

<script src="https://cdn.jsdelivr.net/npm/ios-pwa-splash@1.0.0/cdn.min.js"></script>
<script>iosPWASplash('icon.png', '#000000');</script>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接