Question

想知道我的数学和媒体查询是否正确，因为我无法在任何地方找到此信息。

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

Answer 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">

我以前使用与设备相同的启动图像尺寸时犯了一个错误，而他们根本就没有显示，必须使用正确的图像尺寸。

Answer 2

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

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

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

iPhone 6，iPhone 6 Plus中苹果触控启动图像的正确尺寸？

3 个答案: