01.基礎知識

1.1   屏幕

移動設備與PC設備最大的差別在於屏幕，這主要體如今屏幕尺寸和屏幕分辨率兩個方面。

一般咱們所指的屏幕尺寸，實際上指的是屏幕對角線的長度（通常用英寸來度量）以下圖所示

而分辨率則通常用像素來度量 px，表示屏幕水平和垂直方向的像素數，例如1920*1080指的是屏幕垂直方向和水平方向分別有1920和1080個像素點而構成，以下圖所示

 

 

1.2   長度單位

在Web開發中可使用px（像素）、em、pt（點）、in（英寸）、cm（釐米）作爲長度單位，咱們最經常使用px（像素）作爲長度單位。

咱們能夠將上述的幾種長度單位劃分紅相對長度單位和絕對長度單位。

如上圖所示，iPhone3G/S和iPhone4/S的屏幕尺寸都爲3.5英寸（in）可是屏幕分辨率卻分別爲480*320px、960*480px，由此咱們能夠得出英寸是一個絕對長度單位，而像素是一個相對長度單位（像素並無固定的長度）。

 

1.3   像素密度

DPI（Dots Per Inch）是印刷行業中用來表示打印機每英寸能夠噴的墨汁點數，計算機顯示設備從打印機中借鑑了DPI的概念，因爲計算機顯示設備中的最小單位不是墨汁點而是像素，因此用PPI（Pixels Per Inch）值來表示屏幕每英寸的像素數量，咱們將PPI、DPI都稱爲像素密度，但PPI應用更普遍，DPI在Android設備比較常見。

以下圖所示，利用 勾股定理 咱們能夠計算得出PPI

PPI值的越大說明單位尺寸裏所能容納的像素數量就越多，所能展示畫面的品質也就越精細，反之就越粗糙。

Retina即視網膜屏幕，蘋果註冊的命名方式，意指具備較高PPI（大於320）的屏幕。

 

1.4   設備獨立像素

隨着技術發展，設備不斷更新，出現了不一樣PPI的屏幕共存的狀態（如iPhone3G/S爲163PPI，iPhone4/S爲326PPI），像素再也不是統一的度量單位，這會形成一樣尺寸的圖像在不一樣PPI設備上的顯示大小不同。

以下圖，假設你設計了一個163*163的藍色方塊，在PPI爲163的屏幕上，那這個方塊看起來正好就是1*1寸大小，在PPI爲326的屏幕上，這個方塊看起來就只有0.5*0.5寸大小了。

作爲用戶是不會關心這些細節的，他們只是但願在不一樣PPI的設備上看到的圖像內容差很少大小，因此這時咱們須要一個新的單位，這個新的單位可以保證圖像內容在不一樣的PPI設備看上去大小應該差很少，這就是獨立像素，在IOS設備上叫PT(Point)，Android設備上叫DIP(Device independent Pixel)或DP。

舉例說明就是iPhone 3G（PPI爲163）1dp = 1px，iPhone 4（PPI爲326）1dp = 2px。

咱們也不難發現，若是想要iPhone 3G/S和iPhone 4/S圖像內容顯示一致，能夠把iPhone 4/S的尺寸放大一倍（它們是一個2倍(@2x)的關係），即在iPhone3G/S的上尺寸爲44*44px，在iPhone4/S上爲88*88px，咱們要想實現這樣的結果能夠設置44*44dp，這時在iPhone3G/S上表明44*44px，在iPhone4/S上表明88*88px，最終用能夠看到的圖像差很少大小。

經過上面例子咱們不難發現dp同px是有一個對應（比例）關係的，這個對應（比例）關係是操做系統肯定並處理，目的是確保不一樣PPI屏幕所能顯示的圖像大小是一致的，經過window.devicePixelRatio能夠得到該比例值。

下圖展現了iPhone不一樣型號間dp和px的比例關係

從上圖咱們得知dp（或pt）和px並不老是絕對的倍數關係（並不總能保證可以整除），而是window.devicePixelRatio ~= 物理像素/獨立像素，然而這其中的細節咱們沒必要關心，由於操做系統會自動幫咱們處理好（保證1dp在不一樣的設備上看上去大小差很少）。

 

1.5   像素

一、物理像素指的是屏幕渲染圖像的最小單位，屬於屏幕的物理屬性，不可人爲進行改變，其值大小決定了屏幕渲染圖像的品質，咱們以上所討論的都指的是物理像素。

// 獲取屏幕的物理像素尺寸

window.screen.width;

window.screen.height;

// 部分移動設備下獲取會有錯誤，與移動開發無關，只須要了解

二、CSS像素，與設備無關像素，指的是經過CSS進行網頁佈局時用到的單位，其默認值(PC端)是和物理像素保持一致的（1個單位的CSS像素等於1個單位的物理像素），可是咱們可通縮放來改變其大小。

咱們經過調整瀏覽器的縮放比例能夠直觀的理解CSS像素與物理像素以前的對應關係，以下圖所示：

 咱們須要理解的是物理像素和CSS像素的一個關係，1個物理像素並不老是等於一個CSS像素，經過調整瀏覽器縮放比例，能夠有以上3種狀況。

 

遠程調試

 

   模擬調試

現代主流瀏覽器均支持移動開發模擬調試，一般按F12能夠調起，其使用也比較簡單，能夠幫咱們方便快捷定位問題。

  真機調試

模擬調試能夠知足大部分的開發調試任務，可是因爲移動設備種類繁多，環境也十分複雜，模擬調試容易出現差錯，因此真機調試變的很是必要。

有兩種方法能夠實現真機調試：

一、將作好的網頁上傳至服務器或者本地搭建服務器，而後移動設備經過網絡來訪問。（重點）

二、藉助第三方的調試工具，如weinre、debuggap、ghostlab(比較)等

真機調試必須保證移動設備同服務器間的網絡是相通的。