核心挑戰：屏幕尺寸與像素密度的雙重多樣性

移動 Web 設計師面臨海量設備：iPhone 320×480、Nokia N 系 240×320、舊款 176×208 至 352×416、BlackBerry 160×160 至 324×352，且支援橫豎屏切換。幸運的是，頁面可垂直滾動，只需聚焦處理屏幕寬度。

屏幕寬度統計規律

DeviceAtlas 數據顯示：主流寬度集中在 128、176、240 px 三大類；次級群 120、130、160、208、220 px 差異不大；320+ px 佔比不足 5% 但增長趨勢明顯，小屏正被大屏取代。

像素密度陷阱

桌面端約 85 ppi；移動端差異巨大：Asus Eee PC 133 ppi、iPhone 160 ppi、Nokia E60 240 ppi。同 100×100 px 圖片在不同 ppi 設備上物理大小、細節銳度差異巨大。

應對原則：確定目標 ppi 範圍、真機測試極端情況、使用相對單位或百分比佈局。Android 引入 `dp`（密度無關像素，基準 160 ppi）抽象單位，設計師可用相對大小定義元素，系統自動適配真實尺寸。

四大適配策略

策略 1：定義設備分組

將設備按相近寬度分組，示例五組：

• 微小：84-132 px
• 小：160-176 px
• 中等：208-240 px
• 大：320-480+ px
• 桌面：800+ px

分組依專案目標與用戶群調整，定期複核 DeviceAtlas 數據與開發團隊技術分級（如 A 級支援高級 CSS/JS，C 級僅基礎 XHTML-MP）保持同步。

策略 2：建立默認參考設計

選定參考設備（如中等 240 px）產出參考設計，易向下適配小屏、向上預留擴展空間。亦可按分組產出多版本參考設計，以適配高級特性（GPS、感應器、CSS3）、觸控模式或設備限制。

策略 3：制定內容與設計適應規則

產出可視化設計文檔指導開發程式化實現：

• 圖標按設備組自適應縮放；
• 背景圖標題 100% 滿屏寬；
• 默認組內容圖不超 200px 或屏寬 80%；
• 內容圖隨屏寬自動縮放佈局；
• 小屏隱藏列表圖標騰空間給核心內容；
• 動態樣式表設定版式信息並正確緩存。

策略 4：採用 Web 標準與彈性佈局

用 XHTML+CSS 構建通用標準視圖：語義化標籤定義結構（h、p、ul、div），確保所有識別 HTML 的瀏覽器均能呈現基本可視效果，覆蓋龐大用戶群。在此基礎上，利用瀏覽器/設備 CSS、繪圖工具、腳本逐層增強。固定寬度與彈性寬度之爭核心在於優化文本顯示長度……

文章截斷，核心策略已完整呈現