[Cordova] 手機網頁裏的1px

[Cordova] 手機網頁裏的1px

1px的顯示

Cordova讓開發人員能夠使用HTML頁面，來開發APP的顯示內容。可是在手機上，HTML頁面裏定義的1px，並非直接對應到手機屏幕的一個像素。而是會依照尺寸、分辨率等等數值，計算出一個倍率值，在屏幕上作等比的顯示。也就是說，HTML頁面裏的1px，在不一樣的手機上，可能會以兩個屏幕像素、或是三個屏幕像素來作顯示。

相關的技術細節能夠參考下列資料：

• 移動端尺寸基礎知識 - 可樂橙的私房demo

Chrome開發者工具，對於手機網頁1px的支持

HTML頁面的調適工具，最常被人提起的應該就是Chrome開發者工具。而Chrome開發者工具，對於手機網頁裏的1px，提供了像素換算的功能支持。

• 當開發人員點擊F12，開啓開發者工具以後，再點擊頁面裏的Toggle device mode按鈕，就能夠開啓仿真手機顯示網頁的功能。

• 在仿真手機顯示網頁的工具欄上，開發人員能夠看到目前所仿真的手機的分辨率。這邊要特別注意的是，這個分辨率是經由Chrome換算過的網頁分辨率。Chrome依照手機機型、手機網頁裏的1px與實際顯示在屏幕上的像素比率，換算出滿版網頁的一頁長寬是多少px，來作爲網頁分辨率。開發人員只要使用這個網頁分辨率來開發網頁，在該手機機型上，就會顯示的近似於在Chrome開發者工具裏見到的樣式。

Chrome開發者工具，自定義網頁分辨率

在Chrome開發者工具裏，雖然提供了不少種手機機型供開發人員使用，但並沒有法提供全部的手機機型。當開發人員的目標手機機型，不在Chrome所提供的清單時，開發人員能夠自定義網頁分辨率來進行開發工做。

而要取得手機的網頁分辨率，開發人員能夠使用手機開啓下列網址，該網頁提供網頁分辨率檢測的功能。開發人員進入該網頁後，能夠先記下頁面所顯示的寬度數據，再橫轉手機就能夠取得長度數據，這兩個數據也就是該機型的網頁分辨率。

• 取得網頁分辨率 - 可樂橙的私房demo

• 網頁分辨率-寬度:

• 網頁分辨率-長度:

參考數據

• 移動端尺寸基礎知識 - 可樂橙的私房demo