webapp開發要點記錄

標籤：

 

1. apple-touch-startup-image

將頁面添加到案頭主畫面後，如果有這個標籤的話

<meta name="apple-mobile-web-app-capable" content="yes">

點擊產生的表徵圖就會進入app模式，這時，可以給其添加啟動畫面。

啟動畫面是一張圖片，不同的機型，需要圖片的大小不同，整理如下：

機型	解析度	像素比	物理解析度	圖片解析度
iphone4/iphone4s	320 * 480	2	640 * 960	640 * 920
iphone5/iphone5s	320 * 568	2	640 * 1136	640 * 1096
iphone6	375 * 667	2	750 * 1334	750 * 1294
iphone6+(portrait)	414 * 736	3	1242 * 2208	1242 * 2148
iphone6+(landscape)	736 * 414	3	2208 * 1242	2208 * 1182

 

 

 

 

 

 

圖片的高度是物理像素高度減去頂部系統欄的 （20 * 像素比）px 

 

對應的meta標籤為：

<!-- iphone4, iphone4s-->
<link rel="apple-touch-startup-image" href="/static/img/startup-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"/>

<!-- iphone5, iphone5s-->
<link rel="apple-touch-startup-image" href="/static/img/startup-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"/>

<!-- iphone6-->
<link rel="apple-touch-startup-image" href="/static/img/startup-750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"/>

<!-- iphone6+ portrait-->
<link rel="apple-touch-startup-image" href="/static/img/startup-1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)"/>

<!-- iphone6+ landscape-->
<link rel="apple-touch-startup-image" href="/static/img/startup-2208x1182.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)"/>

 

　　1) 可以支援哪些圖片格式？

　　2) <meta name="apple-mobile-web-app-capable" content="yes"> 是否必須有？

　　

webapp開發要點記錄