iPhone 6和iPhone 6 Plus的apple-touch-startup-image应该使用什么尺寸？

Question

iPhone 6和iPhone 6 Plus的apple-touch-startup-image应该使用什么尺寸？

4

我想确认一下我的数学和媒体查询是否正确，因为我在任何地方都找不到这些信息。

<!-- iOS 8 iPhone 6 (portrait) -->
<link rel="apple-touch-startup-image" href="/apple-touch-startup-image-750×1294.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<!-- iOS 8 iPhone 6 (landscape) -->
<link rel="apple-touch-startup-image" href="/apple-touch-startup-image-710x1334.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
<!-- iOS 8 iPhone 6 Plus (portrait) -->
<link rel="apple-touch-startup-image" href="/apple-touch-startup-image-1242×2148.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)">
<!-- iOS 8 iPhone 6 Plus (landscape) -->
<link rel="apple-touch-startup-image" href="/apple-touch-startup-image-1182x2208.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)">

- Ken Edwards

好的，那么问题是什么？你在数学和媒体查询方面可能遇到了什么问题？ - David Thomas

好吧，我想我可以更清楚一些。这4行代码的尺寸分别为750×1294、710x1334、1242×2148、1182x2208。这些正确吗？ - Ken Edwards

除了宽度和高度互换的明显差异外，为什么每个设备在纵向和横向之间的尺寸会有所不同？ - rmaddy

1

你需要减去20像素或40像素（对于iPhone 6 Plus则为60像素）的状态栏。 - Ken Edwards

3个回答

0

我没有足够的声望来评论，所以这里是我的建议答案，基于Adam Smith的优秀回答：

<!-- iPhone 6 -->
<link href="750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

<!-- iPhone 6+ Portrait -->
<link href="1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image">

<!-- iPhone 6+ Landscape -->
<link href="1182x2208r.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image">

请注意，6+ 横向图片必须向右旋转90°，并且大小应为1182x2208。这与 iPad 的横向启动图片保持一致。如果您是 Web 应用程序开发人员并且有 iPhone 6+，请测试此答案并留言。谢谢！

- Joe Orost

1182 x 2208 逆时针旋转90°后变为 2208 x 1182。横向图像必须以横向模式保存，宽度为2208，高度为1182。 - Adam Smith

@AdamSmith 至少对于 iPhone 5，启动图片必须始终处于垂直位置。 - Andres SK

如果有人手头有iPhone 6+，能够测试一下正确答案的话，那就太好了！ - Joe Orost

0

在我的情况下，大小必须略有不同，如https://dev.to/oskarlarsson/designing-native-like-progressive-web-apps-for-ios-510o所述，我必须为iPhone 6s定义以下链接：

<link href="/apple-launch-750x1334.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

只有在 iPhone 6s 上出现启动图像后才能进行操作。

- jmarceli

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adam Smith · Accepted Answer

编辑：我从帖子中删除了不正确的信息，你所放置的内容是正确的，除了iPhone 6横屏模式和iPhone 6+横屏模式中宽度/高度的互换。

<!-- iPhone 6 -->
<link href="750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

<!-- iPhone 6+ Portrait -->
<link href="1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image">

<!-- iPhone 6+ Landscape -->
<link href="2208x1182.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image">

我之前犯了一个错误，就是使用与设备相同大小的启动图像，但它们根本不显示，必须使用正确的图像大小。