手機網站前端開釋出局技巧

在 此所說的移動平臺前端開發是指標對高階智慧手機（如Iphone、Android）做站點適配也就是WebApp，並非是針對普通手機開發Wap 2.0，所以在閱讀本篇文章以前，你需要對webkit核心的瀏覽器有一定的瞭解，你需要對HTML5和CSS3有一定的瞭解。如果你已經對此有所瞭解， 那現在就開始往下閱讀吧……

1、首先我們來看看webkit核心中的一些私有的meta標籤，這些meta標籤在開發webapp時起到非常重要的作用

<meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;” name=”viewport” />

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

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

<meta content=”telephone=no” name=”format-detection” />

 

第一個meta標籤表示：強制讓文件的寬度與裝置的寬度保持1:1，並且文件最大的寬度比例是1.0，且不允許使用者點選螢幕放大瀏覽；

第二個meta標籤是iphone裝置中的safari私有meta標籤，它表示：允許全屏模式瀏覽；

第三個meta標籤也是iphone的私有標籤，它指定的iphone中safari頂端的狀態條的樣式；

第四個meta標籤表示：告訴裝置忽略將頁面中的數字識別為電話號碼

2、HTML5標籤的使用

在開始編寫webapp時，哥建議前端工程師使用HTML5，而放棄HTML4，因為HTML5可以實現一些HTML4中無法實現的豐富的WEB應 用程式 的體驗，可以減少開發者很多的工作量，當然了你決定使用HTML5前，一定要對此非常熟悉，要知道HTML5的新標籤的作用。比如定義一塊內容或文章區域 可使用section標籤，定義導航條或選項卡可以直接使用nav標籤等等。

3、放棄CSS float屬性

在專案開發過程中可以會遇到內容排列排列顯示的佈局(見下圖)，假如你遇見這樣的視覺稿，哥建議你放棄float，可以直接使用display:block;

 

4、利用CSS3邊框背景屬性

看看這樣一個按鈕

這個按鈕有圓角效果，有內發光效果還有高光效果，這樣的按鈕使用CSS3寫是無法寫出來的，當然圓角可以使用CSS3來寫，但高光和內發光卻無法使用CSS3編寫，

這個時候你不妨使用-webkit-border-image來定義這個按鈕的樣式。

-webkit-border-image就個很複雜的樣式屬性，你一開始可以無法快速理解，建議你閱讀一篇關於border-image的文章

5、塊級化a標籤

請保證將每條資料都放在一個a標籤中，為何這樣做？因為在觸控手機上，為提升使用者體驗，儘可能的保證使用者的可點選區域較大。

6、自適應佈局模式

在編寫CSS時，我不建議前端工程師把容器（不管是外層容器還是內層）的寬度定死。為達到適配各種手持裝置，我建議前端工程師使用自適應佈局模式 （支付寶 採用了自適應佈局模式），因為這樣做可以讓你的頁面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能夠正常的顯示，你無需再次考慮裝置的解析度
。

 

 

原文地址：http://www.iptu.net/index.php/archives/2788.iptu