Pages

2011年4月21日 星期四

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">

沒有留言: