IT工程師數位筆記本

1. iphone 各機型

像素密度 = √{物理分辨率高度 ^ 2 + 物理分辨率寬度 ^ 2} / 主屏對角線長度

比如：

ppi(iphone4) = √{640 ^ 2 + 960 ^ 2} / 3.5 = 329.65

2.  apple-touch-startup-image

將頁面添加到桌面主屏幕后，如果有這個標簽的話

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

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

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

圖片的高度是物理像素高度減去頂部系統欄的 （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) 可以支持哪些圖片格式？ 

　　　　jpg、png、gif等都可以支持，gif圖片只能識別第一幀。

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

　　　　必須有，否則就不會進入app模式，也就不會有啟動畫面。

3.  apple-mobile-web-app-capable 和 apple-touch-fullscreen

<meta name="apple-mobile-web-app-capable" content="yes"> 這個標簽會起作用

<meta name="apple-touch-fullscreen" content="yes" /> 這個標簽不起作用

注：iphone4s 和 iphone6 中測試

4. format-detection

safari 會自動識別頁面中出現的手機號，點擊后會彈出電話呼叫提示，如果不想safari自動識別，可以設置

<meta name="format-detection" content="telephone=no" />

至于email，我在iphone4s和iphone6上測試，并沒有自動識別

5. apple-mobile-web-app-status-bar-style

 <meta name="apple-mobile-web-app-status-bar-style" content="default" />

以app模式啟動時才起作用，設置頂部系統欄的樣式，content有三個取值：default、black、black-translucent。

black-translucent 時，webapp會覆蓋在系統欄之上

6. apple-touch-icon

一般情況下，不需要一堆不同尺寸的icon，iphone下只需

<link rel="apple-touch-icon" sizes="144x144" href="/static/img/touch-icon-144.png" />

這一個尺寸就夠用了

apple-touch-icon-precomposed

實際測試結果看來，不管有沒有precomposed，都會對icon做圓角，至于陰影和拋光效果，實在是看不出來。

7. 各種UserAgent