手機網站前端開發佈局技巧

在 此所說的移動平臺前端開發是指針對高端智能手機（如Iphone、Android）作站點適配也就是WebApp，並不是是針對普通手機開發Wap 2.0，因此在閱讀本篇文章之前，你須要對webkit內核的瀏覽器有必定的瞭解，你須要對HTML5和CSS3有必定的瞭解。若是你已經對此有所瞭解， 那如今就開始往下閱讀吧……

一、首先咱們來看看webkit內核中的一些私有的meta標籤，這些meta標籤在開發webapp時起到很是重要的做用

第一個meta標籤表示：強制讓文檔的寬度與設備的寬度保持1:1，而且文檔最大的寬度比例是1.0，且不容許用戶點擊屏幕放大瀏覽；

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

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

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

二、HTML5標籤的使用

在 開始編寫webapp時，哥建議前端工程師使用HTML5，而放棄HTML4，由於HTML5能夠實現一些HTML4中沒法實現的豐富的WEB應 用程序 的體驗，能夠減小開發者不少的工做量，固然了你決定使用HTML5前，必定要對此很是熟悉，要知道HTML5的新標籤的做用。好比定義一塊內容或文章區域 可以使用section標籤，定義導航條或選項卡能夠直接使用nav標籤等等。

三、放棄CSS float屬性

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

四、利用CSS3邊框背景屬性

看看這樣一個按鈕

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

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

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

五、塊級化a標籤

請保證將每條數據都放在一個a標籤中，爲什麼這樣作？由於在觸控手機上，爲提高用戶體驗，儘量的保證用戶的可點擊區域較大。

六、自適應佈局模式

在 編寫CSS時，我不建議前端工程師把容器（不論是外層容器仍是內層）的寬度定死。爲達到適配各類手持設備，我建議前端工程師使用自適應佈局模式 （支付寶 採用了自適應佈局模式），由於這樣作可讓你的頁面在ipad、itouch、ipod、iphone、android、web safarik、chrome都可以正常的顯示，你無需再次考慮設備的分辨率。