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&nbsp;content="initial-scale=1.0,&nbsp;maximum-scale=1.0,&nbsp;user-scalable=0"&nbsp;name="viewport"> <meta&nbsp;content="yes"&nbsp;name="apple-mobile-web-app-capable">2.设置一张640*1096的启动图。图片记得调成640*1096，放在Images/Default-568h@2x；代码中添加下面这行<link&nbsp;href="Images/[e-mail]"&nbsp;rel="apple-touch-startup-image"&nbsp;sizes="640x1096">由于我的webapp不支持iPhone横屏，支持iPad横屏，所以，一共七张Default.png，三张iphone的，四张ipad的。图片的分辨率千万别错，不然不识别。七张图分辨率分别是：Default.png 320*[e-mail] 640*[e-mail] 640*1096DefaultIpadPortrait.png 768*[e-mail] 1536*2008DefaultIpadLandscape.png 1024*[e-mail] 2048*1496对应的代码如下：<link&nbsp;rel="apple-touch-startup-image"&nbsp;href="Images/Default.png"&nbsp;media="(device-width:&nbsp;320px)"&nbsp;sizes="320x640"/> <link&nbsp;rel="apple-touch-startup-image"&nbsp;href="Images/[e-mail]"&nbsp;media="(device-width:&nbsp;320px)&nbsp;and&nbsp;(-webkit-device-pixel-ratio:&nbsp;2)"&nbsp;sizes="640x920"/> <link&nbsp;rel="apple-touch-startup-image"&nbsp;href="Images/[e-mail]"&nbsp;media="(device-width:&nbsp;320px)&nbsp;and&nbsp;(-webkit-device-pixel-ratio:&nbsp;2)"&nbsp;sizes="640x1096"/> <link&nbsp;href="Images/DefaultIpadPortrait.png"&nbsp;media="(device-width:&nbsp;768px)&nbsp;and&nbsp;(orientation:&nbsp;portrait)"&nbsp;rel="apple-touch-startup-image"/> <link&nbsp;href="Images/[e-mail]"&nbsp;media="(device-width:&nbsp;768px)&nbsp;and&nbsp;(orientation:&nbsp;portrait)&nbsp;and&nbsp;(-webkit-device-pixel-ratio:&nbsp;2)"&nbsp;rel="apple-touch-startup-image"/> <link&nbsp;href="Images/DefaultIpadLandscape.png"&nbsp;media="(device-width:&nbsp;768px)&nbsp;and&nbsp;(orientation:&nbsp;landscape)"&nbsp;rel="apple-touch-startup-image"/> <link&nbsp;href="Images/[e-mail]"&nbsp;media="(device-width:&nbsp;768px)&nbsp;and&nbsp;(orientation:&nbsp;landscape)&nbsp;and&nbsp;(-webkit-device-pixel-ratio:&nbsp;2)"&nbsp;rel="apple-touch-startup-image"/>