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

3 回答 3

9

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

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

于 2014-09-26T10:43:14.493 回答
0

我没有足够的声誉来发表评论，所以这是我根据亚当·斯密的出色回答提出的答案：

<!-- 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+，请测试此答案并发表评论。谢谢！

于 2014-10-31T04:32:10.477 回答
0

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

<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 上。

于 2021-03-30T17:32:33.507 回答