移動端開發必備知識( 轉載 )，必備轉載

移動端開發必備知識( 轉載 )，必備轉載

一：基本概念

( 1 )  CSS pixels 與 device pixels

CSS pixels：

device pixels：

 

( 2 )  PPI/DPI

PPI/DPI : 每英寸所擁有的像素數目，數值越高，即代表顯示屏能夠以越高的密度顯示映像。

 

 

PPI的計算：

　　首先計算出手機螢幕的對角線等效像素，然後除以對角線( 我們平常所說的手機螢幕尺寸說的是手機螢幕對角線的長度 )

 

( 3 )PPI密度決定比例

120-160：低密度手機

160-240：中密度

240-320：高密度

320以上：超高密度( retina )

關鍵問題來了：

　　1個320px的頁面放在4和4s中顯示，你會發現，竟然是滿寬的。

　　原因：頁面被預設放大2倍，也就是640px，而4和4s的寬，正式640px

 

( 4 ) viewport的使用

 <meta name="viewport"

content="

height=[ pixel_value | device-height ],

width=[ pixel_value | width-height ],

initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value ,

user-scalable =[yes | no] ,

target- densitydpi = [ dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi] " />

在這些屬性裡面，我們重點關注target-densitydpi，這個屬性可以改變裝置的預設縮放。

medium-dpi是target的預設值，如果我們顯示定義target-densitydpi=device，那麼裝置就會按照真實的dpi來渲染頁面。打個比方說，一張320*480的圖片，放在iphone4裡面，預設是佔滿屏的，但如果定義了target-densitydpi=device-dpi，那麼圖片只佔螢幕的四分之一( 二分之一的平方 )，因為iphone4的解析度為640*960。

 

二：解決方案

( 1 ) 簡單粗暴

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

( 2 ) 極致完美

在這種方案中，我們採用

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

 1 <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" / > 2 #header{ 3 background:url(medium-density-image.png); 4 } 5 @media screen and (-webkit-device-pixed-ratio:1.5){ 6 /* CSS for high-density screens */ 7 #header { background:url (high-density-image.png);} 8 } 9 @media screen and (- webkit -device-pixel-ratio:0.75) {10 /* CSS for low-density screens */11 #header { background:url (low-density-image.png);}12 }

( 3 ) 合理折中

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

 

這篇文章我看了一遍，覺得對於理解一些基本概念非常有協助，所以拿過來以後，以後說不定給別人講解的時候還能用的到，這篇部落格下面還有關於開發調試的內容，沒有列出來，先給出連結：http://blog.jobbole.com/31023/

由於沒有前端開發經驗，而且第一個公司是一個移動端項目very very多的一個公司，基本上都是，以後類似的東西肯定大大的多。歡迎不幸來到我部落格的朋友和我交流，你也看到了，這裡基本沒什麼有價值的東西，以後肯定會有的，歡迎加我球球：11580563交流