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

標籤：android   style   http   color   使用   os   io   width   

概述

螢幕解析度、裝置像素和CSS像素這些術語，在非常多語境下，是可互換的，但也因此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標籤前，頁面看起來是這種（計算元素尺寸時使用了較大的CSS像素寬度）：

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

iPhone4的特例

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

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

解決方式和DIPS

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

by iefreer