webapp的启动图片如何兼容iPhone5？

Question

我试了如下代码<link href="Images/[e-mail]" sizes="640x1136" media="(device-width: 640px) and (device-height: 1136px)" rel="apple-touch-startup-image">但是没有效果，有已经成功的吗？

Answer 1

css这么写

div#Ampersand {  
    background: url('AmpersandBurned.png');  
    width:43px;  
    height:97px;  
    float:left;  
    -webkit-background-size: 43px 97px;
}

@media screen and (-webkit-device-pixel-ratio: 2) {  div#Ampersand {    
    background: url('[e-mail]');    
    width:43px;    
    height:97px;    
    float:left;
  }
}

Answer 2

主要有两点：
1.viewport不要设width=device-width，应使用以下代码

<meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">

2.设置一张640*1096的启动图。图片记得调成640*1096，放在Images/Default-568h@2x；代码中添加下面这行

<link href="Images/[e-mail]" rel="apple-touch-startup-image" sizes="640x1096">

由于我的webapp不支持iPhone横屏，支持iPad横屏，所以，一共七张Default.png，三张iphone的，四张ipad的。图片的分辨率千万别错，不然不识别。
七张图分辨率分别是：
Default.png 320*460
[e-mail] 640*920
[e-mail] 640*1096
DefaultIpadPortrait.png 768*1004
[e-mail] 1536*2008
DefaultIpadLandscape.png 1024*748
[e-mail] 2048*1496
对应的代码如下：

<link rel="apple-touch-startup-image" href="Images/Default.png" media="(device-width: 320px)" sizes="320x640"/>
<link rel="apple-touch-startup-image" href="Images/[e-mail]" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" sizes="640x920"/>
<link rel="apple-touch-startup-image" href="Images/[e-mail]" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" sizes="640x1096"/>

<link href="Images/DefaultIpadPortrait.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image"/>
<link href="Images/[e-mail]" media="(device-width: 768px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>

<link href="Images/DefaultIpadLandscape.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image"/>
<link href="Images/[e-mail]" media="(device-width: 768px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>