剛接觸行動網頁重構，是否困惑：設計稿該按 320、640 還是 750 做？按 640 重構後，不同手機看起來大小一致，為何不需額外適配？這都源於對 Viewport 與 PX 的不理解。騰訊遊戲設計師七寶這篇干貨，系統科普絕對/相對長度單位、螢幕尺寸/解析度/像素密度、PPI/DPI/SP/PX 等基礎術語，並深入講解 Viewport 核心機制。

單位分類速查

1. 絕對長度單位 vs 相對長度單位

絕對長度： in、cm、mm、pt（1/72 in）、pc（12 pt）。網頁設計極少用，略過。
相對長度： px、em、rem 等，網頁設計主流單位。

2. 螢幕三要素

• 螢幕尺寸： 對角線長度，單位英寸（1 in = 2.54 cm）。常見 3.5~6.0 吋。
• 螢幕解析度： 橫縱像素點數，單位 px。如 1920×1080（指物理裝置像素點）。
• 螢幕像素密度： 每英寸像素點數，單位 PPI。尺寸越小、解析度越高，密度越大。iPhone 3GS vs 4：尺寸同、解析度差一倍、密度差一倍。

計算公式：對角線解析度 = √(寬²+高²)；PPI = 對角線解析度 / 螢幕尺寸。例：5 吋 1920×1080 → 對角線 ≈2203 px → PPI ≈440。

3. PPI、DPI、DP、DIP、SP、PX 關係

• PPI： Pixels Per Inch，螢幕像素密度。
• DPI： Dots Per Inch，印刷術語，用於螢幕時等同 PPI。Android 慣用 DPI，iOS 慣用 PPI。
• DP/DIP： Density Independent Pixels，密度無關像素。想像為物理尺寸，同樣設置在不同手機顯示效果一致。Android 以 160 DPI 為基準：160 DPI 時 1 DP = 1 PX；320 DPI 時 1 DP = 2 PX。按鈕設 44×44 DP，不同密度自動換算 PX，無需寫多套尺寸。
• SP： Scale Independent Pixels，專門定義文字大小，受使用者字體設定影響。
• PX： 網頁設計最常用單位。將顯示器分為細小方格，每格一像素。重構用 PX ≠ 螢幕解析度 PX。

4. 裝置密度分級

Google 官方標準：

蘋果簡化為：非視網膜、視網膜、超視網膜。

對應關係：

核心機制：Viewport 與 CSS PX 的換算

重構用 PX 如同 Android 用 DP，背後有換算係數（1x、2x、3x…）自動適配。係數來源：解析度 + 尺寸 → PPI → 判斷係數等級。

Viewport 基礎

手機瀏覽器將頁面放入虛擬「視口」，可大於/小於可視區。預設視口大於可視區，保護未優化網頁佈局，使用者平移縮放查看。

常見 Viewport 設置

實例演示：iPhone 4S

• 不設 Viewport： 預設 980 px 寬。元素 100×100 px 佔 100/980 螢幕寬，顯示極小。
• 設 width=device-width： 視口 320 px。同樣 100×100 px 佔 100/320，顯示較大。

不同裝置 device-width 計算

（左：三星 Note 4，右：紅米 1S）

• iPhone 6：解析度 1334×750，PPI 326 → 2x → device-width = 750/2 = 375 px
• 紅米 1S：解析度 1280×720，PPI 312 → 2x → device-width = 720/2 = 360 px
• 三星 Note 4：解析度 2560×1440，PPI 515 → 4x → device-width = 1440/4 = 360 px

紅色方塊 200×200 px 在兩裝置看起來差不多大，但 Note 4 螢幕較大，單位份額較大，故實際視覺較大。這解釋為何固定 PX 值在多數手機顯示大小相近，且無需寫多套尺寸適配。

設計稿尺寸選擇與重構策略

設計稿 640（iPhone 4/5 時代主流）或 750（iPhone 6+ 主流）皆可。重構兩大策略：

1. 背景鋪滿 + 元素固定 PX： background-size:100% + 元素 px 設定，正確設定 Viewport 即可順利適配。
2. 固定整體 + JS 縮放： 固定版面寬度，JS 判斷螢幕尺寸縮放頁面，同樣需正確 Viewport。

關鍵前提：正確設置 Viewport。