指尖的觸動(dòng)-制作一個(gè)web App應(yīng)用程序
是時(shí)候擁抱web app了，如果你還在為絞盡腦汁而學(xué)習(xí)HTML5開發(fā)web app應(yīng)用的話，那么花5分鐘閱讀“指尖的觸動(dòng)-制作一個(gè)web app應(yīng)用程序”是很值得，5分鐘后你將會(huì)學(xué)會(huì)如何制作一個(gè)web app應(yīng)用程序，是的，一切沒有你想的那么難，但這些我走了2年的路程去整理。快速脫產(chǎn)學(xué)會(huì)web app開發(fā)，廢話少說，讓我們開始準(zhǔn)備工作。
一：準(zhǔn)備工作
1.
開啟調(diào)試：我們需要做的是打開Safari瀏覽器的調(diào)試模式。在你的iPhone中進(jìn)入 設(shè)置(Settings.app) → Safari → 高級(jí)(Developer) → 調(diào)試控制臺(tái)，然后打開調(diào)試模式，開啟的目的是幫助你尋找可能出現(xiàn)的JavaScript錯(cuò)誤。
一旦完成App，你應(yīng)該關(guān)閉“調(diào)試模式”以便于正確的測(cè)試你的應(yīng)用程序。
2.
知識(shí)儲(chǔ)備：如果你對(duì)viewport 不是十分理解的話，那么道友，請(qǐng)不要移步，等看完本篇文章再來細(xì)看。
二：web App 圖標(biāo)
這將是你最有成就感的事情，你需要準(zhǔn)備一個(gè)圖標(biāo)和啟動(dòng)畫面。
圖標(biāo)的大小：57px x 57px，（iPad圖標(biāo)大小：114px x 114px）
圖標(biāo)最好使用PNG或JPG格式。
下面我使用我的頭像作為圖標(biāo)：
1.
無論你使用什么樣的圖標(biāo)，如果不加以控制，iPhone會(huì)自動(dòng)對(duì)它進(jìn)行圓角處理，創(chuàng)建投影，并增加光澤，以便與其內(nèi)置圖標(biāo)視覺效果相同。
具體來說，iPhone上自定義圖標(biāo)新增加：
- 圓角
- 陰影
- 反射閃耀
代碼如下:
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"/>
|
三：?jiǎn)?dòng)畫面
在iPhone上啟動(dòng)應(yīng)用程序都有一個(gè)啟動(dòng)畫面，你也可以在web App打開之前，指定一個(gè)啟動(dòng)畫面。
默認(rèn)情況下，這一啟動(dòng)畫面是用戶最后一次訪問web App時(shí)的截圖頁面。
如果你想自定義啟動(dòng)畫面，你需要在頁面上添加一個(gè)鏈接圖片。
例如：這是我使用的web App啟動(dòng)畫面
代碼如下：
1 2 3 |
<link rel="apple-touch-startup-image" href="http://t.cn/zY1POql">
|
在這里需要說明的是啟動(dòng)畫面圖片必須是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 |
//對(duì)于iPhone4來說，頁面高度不得低于416px。 $('main').style.height = 416 + "px"; // 導(dǎo)航條隱藏掉 window.scrollTo(0, 0); |
