核心難點
手機分辨率碎片化極嚴重（320×480 ~ 1440×3200+），單套位圖無法完美適配所有設備，且 Android / iOS 均不支援矢量圖片直接渲染（僅 BlackBerry 早期支援 SVG）。
主流適配策略
1. 多倍圖 + 自動縮放（推薦）
- 以最高設計基準（如 iPhone 6/7/8 的 750×1334 @2x 或 1242×2688 @3x）產出 @3x、@2x、@1x 三套圖
- 運行時由系統根據
devicePixelRatio 自動選取並縮放
- 優勢：細節僅有損失，無需補充；劣勢：包體積增大
2. Android 專用方案
- Shape Drawable：XML 定義幾何圖形，支持
dp 單位，天然適配任意密度
- 9-patch (.9.png)：指定可拉伸區域，適用於按鈕背景、聊天氣泡等
- VectorDrawable (API 21+)：原生矢量格式，可無損縮放
3. Web / 跨平台方案
- UI 圖標優先使用 SVG / Icon Font，CSS 控制尺寸
- 響應式圖片：
<picture> + srcset 按斷點加載不同分辨率
- CSS
image-set() / @media (min-resolution: 2dppx) 切換背景圖
切圖流程建議
- 設計稿確定基準寬度（如 750px @2x）
- 標註為
dp / pt 邏輯尺寸，交由工程師換算
- 導出 @3x、@2x、@1x 三套 PNG/WebP
- 圖標、幾何圖形改用 SVG / Shape / VectorDrawable
- 大圖（Banner、啟動圖）採用 9-patch 或分層加載
總結：無完美單圖適配所有機型，工程上採用「多倍圖基準 + 矢量/代碼繪圖輔助 + 響應式加載」組合策略。
