移動APP解決方案

標籤：iphone   解決方案   手機螢幕   圖片   解析度   

    (1)簡單粗暴

    如果我們按照320px寬的設計稿去製作頁面,並且不做任何的設定,頁面會預設自動縮放到跟手機螢幕相等的寬度(這是由於medium-dpi是target-densitydpi的預設值,和不同密度對應不同縮放比例所決定的,這一切都是行動裝置自動完成的).所以這種解決方案,簡單,粗暴,有效.但有一個致命的缺點,對於高密度和超高密度的手機裝置,頁面(特別是圖片)會失真,而且密度越多,失真越厲害.

    (2)極致完美

    在這種方案中,我們採用target-densitydpi=device-dpi,這樣一來,手機裝置就會按照真實的像素數目來渲染,用專業的話來說,就是1CSSpixels =1 device pixels.比如對於640*960的iphone,我們就可以做出640*960的頁面,在iphone上顯示也不會有捲軸.當然,對於其他裝置,也需製作不同尺寸的頁面,所以這種方案往往是使用媒體查詢來做成響應式的頁面.這種方案可以在特定的解析度下完美呈現,但是隨著要相容的不同解析度越多,成本就越高,因為需要為每一種解析度書寫單獨的代碼.

    (3) 合理折中

    針對安卓裝置絕大多數是高密度,部分是中密度的特點,我們可以採用一個折中的方案:我們對480px寬的設計稿進行還原,但是頁面製做卻成320px寬(使用background-size來對圖片進行縮小),然後,讓頁面自動按照比例縮放.這樣一來, 低密度的手機有捲軸(這種手機基本上已經沒有人在用了),中密度的手機會浪費一點點流量,高密度的手機完美呈現,超高密度的手機輕微失真(超高密度的安卓手機很少).這種方案的優點非常明顯:只需要一套設計稿,一套代碼(這裡只是討論安卓手機的情況).

移動APP解決方案