響應式設計：理解裝置像素，CSS像素和螢幕解析度

標籤：for   dos   vol   PFS   vnc   fga   dog   uek   nes   

概述

螢幕解析度、裝置像素（device-width）和CSS像素（width）這些術語，在非常多語境下，是可互換的，但也因此easy在有差異的地方引起混淆。實際上它們是不同的概念。

螢幕解析度和裝置像素是物理概念，而CSS像素是WEB編程的概念；螢幕解析度和裝置像素的區別在於裝置像素顯示密度。

當裝置螢幕ZOOM=100%的時候，瀏覽器CSS像素尺寸和裝置像素相等，而當像素密度(pixel density)為1的時候，螢幕解析度和裝置像素相等。

響應式設計

在響應式設計中，使用了viewport,device-width,media query,width這些概念。web程式猿須要準確理解當中的細微差異。

media query來探測螢幕尺寸，device-width以裝置像素計算螢幕寬度，width以CSS像素計量總的頁面寬度（在iPhone中。最小為980px）。

viewport指的是瀏覽器通過寬度比例來計算元素尺寸的一塊地區，通常比螢幕大一點。

而例如以下meta標籤。將使得viewport地區適配於裝置像素寬度（在iPhone中，一般為320px）。

<meta name="viewport" width="device-width">

在沒有使用meta標籤前，以踏得網在iPhone5上為例，頁面看起來會是這種（計算元素尺寸時使用了較大的CSS像素寬度）：

顯然是由於把640px的內容壓縮到了320px物理螢幕上來顯示而導致的問題。

而加入meta標籤後，變為例如以下正常顯示（計算元素尺寸時使用了裝置像素）：

iPhone4的特例

蘋果iPhone4採用了新的顯示技術。宣稱640px的解析度，但須要注意的是，事實上際裝置像素寬度仍然是320px。

有些裝置在media query時返回的是螢幕解析度而不是裝置像素寬度，這些情況導致了網頁設計上的不一致。

解決方式和DIPS

Google引入了一個dips（device-independent pixels）的中間概念，web開發人員僅僅須要處理DIPS，到底螢幕能顯示多少內容，而無需關心實際螢幕解析度，這是好的技術方向，將有助於消除新的硬體顯示技術給media query編程帶來的混亂。

by iefreer

響應式設計：理解裝置像素，CSS像素和螢幕解析度