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

Question

这里已被多次询问,但没有一个可靠且可理解的答案.这是一个网络应用程序,而不是本机应用程序.

我正在使用:

<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 App,建议使用横向和纵向尺寸.

Answer 2

文档(在此处找到)说:

在iPhone和iPod touch上,图像必须为320 x 460像素且纵向.

我测试过提供不同尺寸,但如果尺寸不完全是320x460,则图像被忽略.Apple没有明确声明是否有可能包含高分辨率启动图像,但论坛帖子(例如:Apple Dev Forum)表明目前无法实现.

Answer 3

刚做了测试......苹果已经添加了"尺寸"属性.所以,对于高分辨率,你添加sizes ="640x920"等.我想这也适用于不同的方向.