首頁(yè) 猿問(wèn) webapp的啟動(dòng)圖片如何兼容iP...

webapp的啟動(dòng)圖片如何兼容iPhone5？

WebApp

慕田峪9158850 2018-07-20 12:27:45

我試了如下代碼<link href="Images/Default-568h@2x.png" sizes="640x1136" media="(device-width: 640px) and (device-height: 1136px)" rel="apple-touch-startup-image">但是沒有效果，有已經(jīng)成功的嗎？

查看完整描述

2 回答

斯蒂芬大帝

TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超8個(gè)贊

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('AmpersandBurned@2x.png');    
    width:43px;    
    height:97px;    
    float:left;
  }
}

反對(duì) 回復(fù) 2018-07-23

紅糖糍粑

TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超6個(gè)贊

主要有兩點(diǎn)：
1.viewport不要設(shè)width=device-width，應(yīng)使用以下代碼

<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.設(shè)置一張640*1096的啟動(dòng)圖。圖片記得調(diào)成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的。圖片的分辨率千萬(wàn)別錯(cuò)，不然不識(shí)別。
七張圖分辨率分別是：
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
對(duì)應(yīng)的代碼如下：

<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"/>

反對(duì) 回復(fù) 2018-07-23