初涉行動端設計/開發，尺寸問題最讓人糾結。本文從原理出發，通俗易懂梳理所有細節，助你建立清晰尺寸體系。（註：內容與 ID 30779 高度重疊，此為完整版）

現象：碎片化不恐怖，有規律可循

Android 分辨率眾多（480×800 到 2K），iPhone 也碎片化（640×960 到 1242×2208）。但大多數 App/網頁在各尺寸都能正常顯示，說明有解決方法且有規律。

核心概念：像素密度（PPI）

屏幕由像素點組成，物理尺寸與像素尺寸不成比例。iPhone 3gs（320×480）與 4s（640×960）同 3.5 吋，PPI 相差一倍。PPI = 每英寸像素點數，連接數位與物理世界的橋梁，PPI 越高畫質越精細。Retina 屏清晰很多，因 PPI 翻倍。

倍率與邏輯像素

Retina 屏以 2×2 物理像素渲染 1 個邏輯像素，介面物理大小不變、畫質更銳利。實際像素 ÷ 倍率 = 邏輯像素（pt/dp），同邏輯像素即同顯示效果。iOS 以 1x 為基準定 2x/3x 倍率；Android 將 PPI 劃分區間定義倍率（ldpi 0.75x、mdpi 1x、hdpi 1.5x、xhdpi 2x、xxhdpi 3x、xxxhdpi 4x）。

Android 主流機型倍率粗略判斷（友盟 2014-2015 數據）

• ldpi：已絕跡
• mdpi (320×480)：份額 <5%，新機無
• hdpi (480×800/854, 540×960)：早期低端/現低端大螢幕
• xhdpi (720×1280)：早期中端/現中低端
• xxhdpi (1080×1920)：早期高端/現中高端主流
• xxxhdpi (1440×2560)：極少 2K 機（如 Nexus 6）

注意：即使有倍率，Android 邏輯像素尺寸不統一（如 320×533 vs 360×640），顯示效果無法完全一致。

單位：pt (iOS) / dp (Android) = 邏輯像素

換算：1pt=1dp=倍率 px。設計/開發溝通務必用邏輯像素，勿說「我按 xhdpi 做的，高度 96px」。PS 中單位改為 Point，透過 DPI 控制倍率（72/144/216/288 DPI 對應 1x/2x/3x/4x）。

Web 端對策

CSS 單位仍用 px，但加一行 <meta name="viewport" content="width=device-width, initial-scale=1">，瀏覽器按裝置像素密度自動縮放渲染。按邏輯像素設計開發，資源圖準備 2x/3x 再縮小顯示以保清晰。可用測試頁 查看裝置邏輯寬度。

實戰畫布設定建議

• iOS：以 375×667pt (iPhone 8) 或 414×896pt (iPhone 11/XR) 為基準畫布，輸出 @2x/@3x 切圖。
• Android：以 360×640dp (xxhdpi 基準) 為畫布，輸出 @2x/@3x/@4x 切圖，或用向量圖 (SVG/VectorDrawable)。
• Web：以 320px/375px/414px 等斷點設計，圖片用 srcset/picture 響應式載入。

掌握邏輯像素思維，跨平台協作不再混亂，切圖標註精準高效。