iPhone 4 Retina "apple-touch-startup-image"用于网络应用

Question

这个问题已经在这里被问过多次，但没有一个可靠且易于理解的答案。这是一个网络应用，而不是 native 应用。

我正在使用:

<link rel="apple-touch-startup-image" href="images/startup.png" />

显示启动图像。如果图像的分辨率为 320x460，则加载效果良好。我尝试使用视网膜的分辨率为 640x920(状态栏去掉了 40px)，但没有成功。我尝试过 @2x ，但也失败了。

这可能吗？

Answer 1

这将向您的 Web 应用程序添加启动屏幕。以下是 iPad 和 iPhone/iPod Touch 所需的尺寸，其中也包括状态栏区域。

    <!-- iPhone -->
    <link href="http://www.example.com/mobile/images/apple-startup-iPhone.jpg" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">

    <!-- iPhone (Retina) -->
    <link href="http://www.example.com/mobile/images/apple-startup-iPhone-RETINA.jpg" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

    <!-- iPhone 5 -->
    <link href="http://www.example.com/mobile/images/apple-startup-iPhone-Tall-RETINA.jpg"  media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

    <!-- iPad Portrait -->
    <link href="http://www.example.com/mobile/images/apple-startup-iPad-Portrait.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">

    <!-- iPad Landscape -->
    <link href="http://www.example.com/mobile/images/apple-startup-iPad-Landscape.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">

    <!-- iPad Portrait (Retina) -->
    <link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Portrait.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

    <!-- iPad Landscape (Retina) -->
    <link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Landscape.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

如果创建兼容 iPad 的 Web 应用程序，建议同时使用横向和纵向尺寸。