[[72418]]

是時候擁抱web app了，如果你還在為絞盡腦汁而學(xué)習(xí)HTML5開發(fā)web app應(yīng)用的話，那么花5分鐘閱讀“指尖的觸動-制作一個web app應(yīng)用程序”是很值得，5分鐘后你將會學(xué)會如何制作一個web app應(yīng)用程序，是的，一切沒有你想的那么難，但這些我走了2年的路程去整理?？焖倜摦a(chǎn)學(xué)會web app開發(fā)，廢話少說，讓我們開始準(zhǔn)備工作。

一：準(zhǔn)備工作

1.

開啟調(diào)試：我們需要做的是打開Safari瀏覽器的調(diào)試模式。在你的iPhone中進(jìn)入 設(shè)置(Settings.app) → Safari → 高級(Developer) → 調(diào)試控制臺，然后打開調(diào)試模式，開啟的目的是幫助你尋找可能出現(xiàn)的JavaScript錯誤。
一旦完成App，你應(yīng)該關(guān)閉“調(diào)試模式”以便于正確的測試你的應(yīng)用程序。

2.

知識儲備：如果你對viewport 不是十分理解的話，那么道友，請不要移步，等看完本篇文章再來細(xì)看。

二：web App 圖標(biāo)

這將是你最有成就感的事情，你需要準(zhǔn)備一個圖標(biāo)和啟動畫面。
圖標(biāo)的大小：57px x 57px，（iPad圖標(biāo)大小：114px x 114px）
圖標(biāo)最好使用PNG或JPG格式。
下面我使用我的頭像作為圖標(biāo)：

1.

無論你使用什么樣的圖標(biāo)，如果不加以控制，iPhone會自動對它進(jìn)行圓角處理，創(chuàng)建投影，并增加光澤，以便與其內(nèi)置圖標(biāo)視覺效果相同。

具體來說，iPhone上自定義圖標(biāo)新增加：

1. 圓角
2. 陰影
3. 反射閃耀

代碼如下:

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內(nèi)置的一些的特效
例如：這是沒有任何修飾的頭像，,如何在iPhone上沒有任何修飾呢？

代碼如下:

1
2
3

　
<link rel="apple-touch-icon-precomposed" href="http://t.cn/zY1v13L"/>
　

三：啟動畫面

在iPhone上啟動應(yīng)用程序都有一個啟動畫面，你也可以在web App打開之前，指定一個啟動畫面。
默認(rèn)情況下，這一啟動畫面是用戶最后一次訪問web App時的截圖頁面。
如果你想自定義啟動畫面，你需要在頁面上添加一個鏈接圖片。
例如：這是我使用的web App啟動畫面

代碼如下：

1
2
3

　
<link rel="apple-touch-startup-image" href="http://t.cn/zY1POql">
　

在這里需要說明的是啟動畫面圖片必須是PNG圖片，其他JPG，GIF都是浮云，其次圖片的尺寸是320*460縱向。當(dāng)然還有需要注意的是將apple-mobile-web-app-capable設(shè)置為yes。

四：Safari瀏覽器的組件

1.

如果你想web App不顯示瀏覽器的界面組件。

那么隱藏瀏覽器組件 設(shè)置apple-mobile-web-app-capable為yes
代碼如下：

1
2
3

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

2.改變Safari狀態(tài)欄的外觀

改變Safari狀態(tài)欄的外觀有三種顏色可以選擇,分別是：

• 默認(rèn) //白色 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" />
　

五：隱藏導(dǎo)航條

如果你在safair瀏覽器下打開網(wǎng)頁，然后想要隱藏導(dǎo)航條的話，

代碼如下：

1
2
3
4

//對于iPhone4來說，頁面高度不得低于416px。
$('main').style.height = 416 + "px";
// 導(dǎo)航條隱藏掉
window.scrollTo(0, 0);