iPhone 6、iPhone 6 Plus 中 apple-touch-startup-image 的正确尺寸？答案

【问题标题】：Correct Size for apple-touch-startup-image in iPhone 6, iPhone 6 Plus?iPhone 6、iPhone 6 Plus 中 apple-touch-startup-image 的正确尺寸？
【发布时间】：2014-09-24 21:06:14
【问题描述】：

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

<!-- 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)">

【问题讨论】：

好吗？那么，问题是什么，您（可能）在数学和媒体查询方面遇到什么问题？
大声笑，好吧，我想我本来可以更清楚的。 4行代码的尺寸，750×1294、710x1334、1242×2148、1182x2208。这些是正确的吗？
为什么每个设备的纵向和横向尺寸会不同（除了宽度和高度的明显交换）？
状态栏需要减去 20px 或 40px（iPhone 6 Plus 为 60px）。

标签： html media-queries iphone-6 iphone-6-plus

【解决方案1】：

编辑：我从帖子中删除了不正确的信息，您放置的内容是正确的减去 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">

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

【讨论】：

That same mobilexweb.com link 你来源（这是一本很棒的书，我已经读过了）还声明了 375px 和 414px 的设备宽度。这与我已经为 iPad 和旧款 iPhone 设置的 apple-touch-startup-image 媒体属性相吻合。
iPhone 6 Plus 只允许横向，我刚刚发现。这样就消除了一行代码。在我发布完成的代码 sn-p 之前，仍然需要在 Plus 上进行测试。
啊，是的，您对像素的看法绝对正确，目前有很多相互矛盾的信息，但这似乎是最完整的。 iPhone 6+ 是否仅支持横向（不支持纵向视图），还是唯一支持纵向和横向的设备？
iPhone 6+ 有纵向和横向。 iPhone 6 的主屏幕没有横向，这有点道理。
@KenEdwards 为什么 iPhone 6 没有横向模式有意义？ iPhone 5S 确实有。只是想知道它背后的原因是什么。

【解决方案2】：

我没有足够的声誉来发表评论，所以这是我根据 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 的横向启动图像一致。如果您是 webapp 开发人员并且拥有 iPhone 6+，请测试此答案并发表评论。谢谢！

【讨论】：

1182 x 2208 旋转 90° 为 2208 x 1182。横向图像必须以横向模式保存，它需要是 2208 宽和 1182 高。
@AdamSmith 至少对于 iPhone 5，启动图像必须始终处于垂直位置。
如果有 iPhone 6+ 的人可以测试正确答案，那就太好了！

【解决方案3】：

在我的情况下，尺寸必须略有不同，如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 上。

【讨论】：