iPhone Web App Meta

剛好找到些資訊在此做個紀錄

iPhone 看普通網頁時會將屏幕像素闊度變成 980 像素，如果想將屏幕像素闊度變回原本大小，可以在 head 加入以下設定:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1, user-scalable=no" />

• width=device-width 是用 iPhone 屏幕像素來定義網頁闊度。
• minimum-scale 是用戶可將畫面縮小的倍率。
• maximum-scale 是用戶可將畫面放大的倍率。
• user-scalable 是否給用戶可將畫面放大或縮小。

用戶將網頁收藏為書並加到主畫面時，可以令最下的選單消失，令網頁變為全屏幕，在 head 加入以下設定:

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

用戶將網頁收藏為書並加到主畫面時，可加入自定義的 icon，在 head 加入以下設定:

<link rel="apple-touch-icon" href="/custom_icon.png"/>

用戶將網頁收藏為書並加到主畫面時，可以設定在載入網頁時的等待畫面，在 head 加入以下設定:

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

用戶將網頁收藏為書並加到主畫面時，可以將最上的狀態列設定為其他顏色(發覺只能設定為黑色)，在 head 加入以下設定:

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

• default:灰色
• black:黑色
• black-translucent:黑色半透明(不建議使用) 

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

想在網頁載入完成時隱藏最頂的網址列，可加入以下的 Javascript:

window.onload = function(){
    setTimeout(function(){
        window.scrollTo(0, 1);
    }, 100);
}

防止用戶拉動網頁，可加入以下的 Javascript:

document.addEventListener("touchmove", function(event){
    event.preventDefault();
}, false);

如果旋轉裝置，則必須在加上 resize event

// jQuery resize event

$(window).resize(function() {

  window.scrollTo(0, 1);

});

資料來源：http://blog.wu-boy.com/2012/07/develop-iphone-moblie-web-app-tip/