TA貢獻1827條經驗 獲得超8個贊
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('[email protected]');
width:43px;
height:97px;
float:left;
}
}
TA貢獻1815條經驗 獲得超6個贊
主要有兩點：
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/[email protected]" rel="apple-touch-startup-image" sizes="640x1096">
由于我的webapp不支持iPhone橫屏，支持iPad橫屏，所以，一共七張Default.png，三張iphone的，四張ipad的。圖片的分辨率千萬別錯，不然不識別。
七張圖分辨率分別是：
Default.png 320*460
[email protected] 640*920
[email protected] 640*1096
DefaultIpadPortrait.png 768*1004
[email protected] 1536*2008
DefaultIpadLandscape.png 1024*748
[email protected] 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/[email protected]" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" sizes="640x920"/> <link rel="apple-touch-startup-image" href="Images/[email protected]" 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/[email protected]" 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/[email protected]" media="(device-width: 768px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>
舉報