iPhone Web App Supported Meta Tags

iPhone Supported Meta Tags

• 
  

  viewport

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

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

  • width=device-width 定義手持式裝置網頁寬度。設定成device-width可讓瀏覽器自行判斷手持式裝置寬度，也可以直接設定大小，如width=320。
  • initial-scale 畫面是以多少倍的 viewport 來顯示
  • minimum-scale 畫面縮小倍率限制。
  • maximum-scale 畫面放大倍率限制。: 0 < user-scalable < 10.0，預設值0.25。
  
  
  
  
  • 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

  設定iPhone狀態列的顏色

  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  
  • default:灰色
  • black:黑色
  • black-translucent:黑色半透明(不建議使用)
  
  
• 
  

  format-detection

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

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

  apple-touch-icon

  設定桌面ICON圖片(57px x 57px)

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

  apple-touch-startup-image

  載入網頁時的等待畫面(320px x 460px)

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