一、核心概念建立

1. CSS 像素 vs 設備像素

• CSS Pixel：瀏覽器佈局單位，邏輯像素。
• Device Pixel：螢幕物理發光點，最小顯示單元。
• 換算公式：1 CSS Pixel = (devicePixelRatio)² Device Pixels（面積關係）。

2. PPI / DPI 與密度分桶

PPI = 對角線像素 / 螢幕尺寸（英寸）。Android 依 PPI 分為四級密度，對應預設縮放比例：

密度級別	PPI 範圍	縮放比例	代表機型
ldpi	~120	0.75x	早期低端機
mdpi	160	1x (基準)	早期標準機
hdpi	240	1.5x	主流 Android
xhdpi	320	2x	高端旗艦
xxhdpi	480	3x	超高清機型
xxxhdpi	640	4x	極少數旗艦

關鍵洞察：國內 Android 市場 hdpi 佔比最高，適配策略應以 1.5x 為核心基準。

3. Viewport 關鍵屬性

<meta name="viewport" content="
  width=device-width,
  initial-scale=1.0,
  maximum-scale=1.0,
  user-scalable=no,
  target-densitydpi=device-dpi   /* 僅 Android WebView 支援 */
">

• target-densitydpi=device-dpi：強制 1 CSS px = 1 Device px，繞過預設縮放。
• iOS Safari 忽略此屬性，需靠 initial-scale 控制。

二、三大適配方案對比

方案 A：簡單粗暴（無設定，依賴預設縮放）

• 設計稿 320px，無 viewport 干預。
• 優點：零成本、一套碼跑全平台。
• 缺點：高密度機型圖片模糊、文字鋸齒，體驗隨密度遞減。

方案 B：極致完美（device-dpi + 響應式 + 多套圖）

• 設定 target-densitydpi=device-dpi，媒體查詢 -webkit-device-pixel-ratio 切換 1x/2x/3x 圖。
• 優點：每個密度像素級完美。
• 缺點：設計稿、切圖、CSS 維護成本隨密度數線性增長，工程量巨大。

方案 C：合理折中（推薦，針對 Android hdpi 主流）

1. 設計稿採 480px（hdpi 物理寬 480 ≈ 320 CSS px × 1.5）。
2. CSS 寫 320px 邏輯寬，圖片用 background-size: contain 或 width: 100% 縮放。
3. 低密度出現橫向滾動（可接受，用戶極少）、中密度微浪費流量、hdpi 完美、xhdpi 輕微模糊（極少數）。
4. 優點：單套設計稿、單套代碼、覆蓋 90%+ Android 設備。

三、真機遠程調試：Weinre 實戰

1. 環境搭建

# 需預裝 JDK
java -jar weinre.jar --httpPort 8081 --boundHost -all-

瀏覽器訪問 https://localhost:8081 見到客戶端目標頁面即成功。

2. 被調試頁面植入腳本

<script src="https://{PC_IP}:8081/target/target-script-min.js#anonymous"></script>

3. 調試面板操作

• 在 https://{PC_IP}:8081/client/#anonymous 開啟 DevTools 風格面板。
• 支援 Elements、Console、Network、Sources、Timeline 等面板，可即時修改 DOM/CSS/JS 並見效於手機端。

4. 替代方案

• Chrome DevTools Remote Debugging：USB 連接 Android Chrome，原生支援，無需 Weinre。
• Safari Web Inspector：macOS + iOS Safari 組合，體驗最佳。
• vConsole / Eruda：輕量級內嵌控制台，適合無法 USB 調試的微信內嵌頁面。

四、總結檢查清單

• [ ] 確認設計稿基準寬度（建議 375px iPhone 8 / 320px 通用）。
• [ ] Viewport 設定 width=device-width, initial-scale=1。
• [ ] 圖片採用 srcset / picture / CSS Image-set 多規格。
• [ ] 字體用 rem / vw 相對單位，避免固定 px。
• [ ] 接入真機調試鏈路（Weinre / Chrome Remote / vConsole）。