做Phonegap項目一段時間了,從最開始的迷惑到現在漸入佳境,有不少值得總結的地方.
特在此記錄下來,以便於來者之可追.
布局重點No.1 瀏覽器是你的輔助布局調試工具,但遠不是你布局的終點.
在開發移動app時,你要時刻記住,app的最終目標不是pc瀏覽器而是移動設備. 無論別人告訴你,瀏覽器如何如何能模擬出設備的尺寸,請記住設備里的測試才是值得信賴的.
也許會相對麻煩,但是盡量多的使用移動設備測試布局結果. 跟敏捷開發的思想一致,設備展現給你測試結果的頻率越高,你能開發出越真實的app,也更接近於最終需求.
布局重點No.2 viewport
<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0" />
這或許是你在學習大多數的phonegap項目源碼,都會最先看到的一個段子了.
布局重點No.3 響應式布局vs流式布局+百分比
Responsible design. 這個是我身旁的一位經驗豐富的同事在面對當前網站需要在各種設備上顯示的現狀經常提到的一個名詞.
的確,在css3大行其道的今天,一個簡單的@media讓網站使用最適合於該設備的樣式表.
但是本人卻相對來說比較傾向於后者.
原因很簡單:前者的成本相對較高. 要實現一個比較好的響應式布局,意味着你有充足的標准的設備來進行測試,充足的勇氣面對固定尺寸可能帶給你的使布局變形的可能性.
如果你經常使用移動設備,你會發現兩個細節:(1)app往往使用左右滑動來實現分頁(2)一個界面顯示較多內容時,app會使用上下滑動來顯示多出的內容. 前面說的細節讓流式布局在移動設備中如魚得水. 試想, 當屏幕足夠寬的時候,app的顯示內容橫向布局以讓界面顯示更多內容;當屏幕變為寬度較窄的設備(如小屏幕手機)時,內容就滑動到下方--這不就是咱們在css進行布局時經常用到的float的效果么?
布局重點No.4 字體及尺寸盡量使用em或者百分比
在最近的一個phonegap項目中,我開始一段時間被"像素"折磨得死去活來.當客戶發來一個psd,按照上面的固定像素習慣性的進行切圖,布局,並在pc的瀏覽器中反復測試並確認與客戶的需求無異時,我並沒有意識到,這種設計在移動開發中簡直是噩夢的開始. 固定的像素布局及字體完全無法適應不同屏幕尺寸的設備,這讓app看上去簡直一塌糊塗.
但是當你在使用em+百分比+流式布局來解決這些問題時,一切都迎刃而解.
布局重點No.5 圖片顯示使用img標簽,並固定高度
當顯示圖片時,你或許會面對兩種選擇:(1)使用img標簽(2)使用圖片作為background-image. 在移動設備中,雖然是否使用img標簽不涉及seo方面的考慮,但是無疑也是較好的選擇.在使用background顯示圖片時,圖片無法自動計算比例,而是只能按照容器的尺寸計算百分比顯示或者指定一個固定像素尺寸顯示,正如你所想,這種顯示必定會使圖片出現失真的情況,顯示效果欠佳.
顯示圖片的另一個技巧是使用固定高度,而不使用固定寬度. 當采取這種方法設置圖片時,圖片能較好的按照比例伸縮,顯示出原有的效果.
未完待續...