筆記：Apple Web App 常用的meta設定

詳細的設定介紹請參考Apple官方網站：
https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/usingtheviewport/usingtheviewport.html

viewport：開發者決定手持裝置的縮放比例設定

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, user-scalable = no">

• l width=device-width 定義手持式裝置網頁寬度。設定成device-width可讓瀏覽器自行判斷手持式裝置寬度，也可以直接設定大小，如width=320。
• l initial-scale 畫面是以多少倍的 viewport 來顯示
• l minimum-scale 畫面縮小倍率限制。
• l maximum-scale 畫面放大倍率限制。（0 < user-scalable < 10.0，預設值0.25）
• l user-scalable 是否允許放大或縮小視窗（預設為YES）。

apple-mobile-web-app-capable

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

定義用戶是否將視窗啟用為全螢幕模式，用戶可透過新增書籤將網頁連結新增為一個桌面ICON，這樣用戶在啟動時就不會出線瀏覽器的上下選單，畫面看起來就像一個App
 
apple-mobile-web-app-status-bar-style

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

設定iPhone狀態列的顏色

• default：灰色
• black：黑色
• black-translucent：黑色半透明（不建議使用）

format-detection

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

啟用或關閉瀏覽器自動偵測，如將電話自動轉換為連結
 
apple-touch-icon

<link rel="apple-touch-icon" href="img/troie_icon.png" />
<link rel="apple-touch-icon-precomposed" href="img/troie_icon.png" /> 

設定桌面ICON圖片（57px x 57px）
 
apple-touch-startup-image

<link rel="apple-touch-startup-image" href="img/wait.png">

載入網頁時的等待畫面（320px x 460px）