您好,匿名用户
随意问技术百科期待您的加入

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

0 投票

我试了如下代码

<link href="Images/Default-568h@2x.png" sizes="640x1136" media="(device-width: 640px) and (device-height: 1136px)" rel="apple-touch-startup-image">

但是没有效果,有已经成功的吗?

用户头像 提问 2012年 12月1日 @ Berserker 上等兵 (157 威望)
分享到:

1个回答

0 投票
 
最佳答案

试了一天终于搞定了,主要有两点:
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/Default-568h@2x.png" rel="apple-touch-startup-image" sizes="640x1096">

由于我的webapp不支持iPhone横屏,支持iPad横屏,所以,一共七张Default.png,三张iphone的,四张ipad的。图片的分辨率千万别错,不然不识别。
七张图分辨率分别是:
Default.png 320*460
Default@2x.png 640*920
Default-568h@2x.png 640*1096
DefaultIpadPortrait.png 768*1004
DefaultIpadPortrait@2x.png 1536*2008
DefaultIpadLandscape.png 1024*748
DefaultIpadLandscape@2x.png 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/Default@2x.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" sizes="640x920"/>
<link rel="apple-touch-startup-image" href="Images/Default-568h@2x.png" 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/DefaultIpadPortrait@2x.png" 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/DefaultIpadLandscape@2x.png" media="(device-width: 768px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>
用户头像 回复 2012年 12月1日 @ Vladimir 上等兵 (275 威望)
选中 2012年 12月1日 @Berserker
提一个问题:

相关问题

+1 投票
1 回复 93 阅读
0 投票
1 回复 35 阅读
用户头像 提问 2012年 12月1日 @ Emiya Shirou 上等兵 (438 威望)
0 投票
1 回复 302 阅读
0 投票
1 回复 33 阅读
用户头像 提问 2013年 9月21日 @ Fiora 上等兵 (297 威望)
0 投票
1 回复 120 阅读

欢迎来到随意问技术百科, 这是一个面向专业开发者的IT问答网站,提供途径助开发者查找IT技术方案,解决程序bug和网站运维难题等。
温馨提示:本网站禁止用户发布与IT技术无关的、粗浅的、毫无意义的或者违法国家法规的等不合理内容,谢谢支持。

欢迎访问随意问技术百科,为了给您提供更好的服务,请及时反馈您的意见。
...