Fork me on GitHub

Programming Design Notes

開發 iPhone Web App 的小技巧

| Comments

很久以前開發過給 iPhone 用的網頁,今天無意中看到那些程式碼,順便記錄下來。

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

想在網頁載入完成時隱藏最頂的網址列,可加入以下的 Javascript:
window.onload = function(){
setTimeout(function(){
window.scrollTo(0, 1);
}, 100);
}

防止用戶拉動網頁,可加入以下的 Javascript:
document.addEventListener("touchmove", function(event){
event.preventDefault();
}, false);

相關書籍: Building iPhone Apps with HTML, CSS, and JavaScript: Making App Store Apps Without Objective-C or CocoaSafari and WebKit Development for iPhone OS 3.0Beginning iPhone Web Apps: HTML5, CSS3, and JavaScript for WebKit