指尖的觸動-制作一個web App應用程序
是時候擁抱web app了，如果你還在為絞盡腦汁而學習HTML5開發web app應用的話，那么花5分鐘閱讀“指尖的觸動-制作一個web app應用程序”是很值得，5分鐘后你將會學會如何制作一個web app應用程序，是的，一切沒有你想的那么難，但這些我走了2年的路程去整理。快速脫產學會web app開發，廢話少說，讓我們開始準備工作。
一：準備工作
1.
開啟調試：我們需要做的是打開Safari瀏覽器的調試模式。在你的iPhone中進入 設置(Settings.app) → Safari → 高級(Developer) → 調試控制臺，然后打開調試模式，開啟的目的是幫助你尋找可能出現的JavaScript錯誤。
一旦完成App，你應該關閉“調試模式”以便于正確的測試你的應用程序。
2.
知識儲備：如果你對viewport 不是十分理解的話，那么道友，請不要移步，等看完本篇文章再來細看。
二：web App 圖標
這將是你最有成就感的事情，你需要準備一個圖標和啟動畫面。
圖標的大小：57px x 57px，（iPad圖標大小：114px x 114px）
圖標最好使用PNG或JPG格式。
下面我使用我的頭像作為圖標：
1.
無論你使用什么樣的圖標，如果不加以控制，iPhone會自動對它進行圓角處理，創建投影，并增加光澤，以便與其內置圖標視覺效果相同。
具體來說，iPhone上自定義圖標新增加：
- 圓角
- 陰影
- 反射閃耀
代碼如下:
1 2 3 4 5 |
<link rel="apple-touch-icon" href="http://t.cn/zY1v13L"/> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://t.cn/zY1zsIt" /> |
2.
使用自定義顯示的效果，而不使用iPhone內置的一些的特效
例如：這是沒有任何修飾的頭像，,如何在iPhone上沒有任何修飾呢？
代碼如下:
1 2 3 |
<link rel="apple-touch-icon-precomposed" href="http://t.cn/zY1v13L"/>
|
三：啟動畫面
在iPhone上啟動應用程序都有一個啟動畫面，你也可以在web App打開之前，指定一個啟動畫面。
默認情況下，這一啟動畫面是用戶最后一次訪問web App時的截圖頁面。
如果你想自定義啟動畫面，你需要在頁面上添加一個鏈接圖片。
例如：這是我使用的web App啟動畫面
代碼如下：
1 2 3 |
<link rel="apple-touch-startup-image" href="http://t.cn/zY1POql">
|
在這里需要說明的是啟動畫面圖片必須是PNG圖片，其他JPG，GIF都是浮云，其次圖片的尺寸是320*460縱向。當然還有需要注意的是將apple-mobile-web-app-capable設置為yes。
四：Safari瀏覽器的組件
1.
如果你想web App不顯示瀏覽器的界面組件。
那么隱藏瀏覽器組件 設置apple-mobile-web-app-capable為yes
代碼如下：
1 2 3 |
<meta name="apple-mobile-web-app-capable" content="yes" />
|
2.改變Safari狀態欄的外觀
改變Safari狀態欄的外觀有三種顏色可以選擇,分別是：
- 默認 //白色 default
- 黑色 //黑色 black
- 黑色半透明 //black-translucent
代碼如下：
1 2 3 4 5 6 7 |
<meta name="apple-mobile-web-app-status-bar-style" content="default" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> |
五：隱藏導航條
如果你在safair瀏覽器下打開網頁，然后想要隱藏導航條的話，
代碼如下：
1 2 3 4 |
//對于iPhone4來說，頁面高度不得低于416px。 $('main').style.height = 416 + "px"; // 導航條隱藏掉 window.scrollTo(0, 0); |
