一、為什麼需要 Mobile First？
根據 StatCounter 的統計，全球行動裝置的網路使用量已超過 58%，在台灣更高達 62%。Google 從 2019 年起全面採用 Mobile-First Indexing，代表 Google 現在以行動版頁面作為主要的爬取與索引依據。
Mobile First 不只是「先設計手機版」，而是一種設計思維：從最受限的環境開始思考，逐步擴展到更大的螢幕。這種方法帶來的優勢包括：
- 強迫團隊聚焦核心內容與功能
- 確保最龐大的使用者群體有良好體驗
- 簡化桌面版開發（漸進增強而非優雅降級）
- 提升整體網站效能
二、斷點設計策略
CSS 斷點（Breakpoints）是響應式設計的核心。但好的斷點策略不是基於裝置尺寸，而是基於內容需求。
2.1 內容驅動的斷點原則
與其記住一堆裝置寬度，不如問自己：「在這個寬度下，內容需要改變呈現方式嗎？」以下是實用的斷點建議：
- 480px 以下：手機直立模式，單欄佈局
- 480px-768px：手機橫立 / 小平板，可開始顯示雙欄
- 768px-1024px：平板裝置，完整的雙欄或三欄佈局
- 1024px-1440px：筆記型電腦，多欄佈局 + 側邊欄
- 1440px 以上：大型桌面螢幕，最大化內容區域寬度
2.2 CSS 實作方法
推薦使用 Mobile First 的 CSS 寫法，即預設樣式為手機版，透過 min-width 逐步增強：
/* 預設：手機版（單欄） */
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
/* 平板以上：雙欄 */
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}
/* 桌面：三欄 */
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
}三、觸控介面設計
行動裝置的主要互動方式是觸控，這需要特別的設計考量：
3.1 點擊目標大小
Google 建議可互動元素的最小尺寸為 48x48px，元素之間的間距至少 8px。這不只是美觀問題，更是無障礙需求——手指粗的使用者或有運動障礙的使用者需要足夠大的點擊區域。
3.2 手勢設計
行動裝置支援豐富的手勢操作，但要確保手勢直覺且有明確的視覺回饋：
- 滑動：用於輪播、列表切換。確保有指示器告知使用者可以滑動。
- 下拉刷新：用於內容更新。提供明確的載入狀態回饋。
- 長按：用於進階操作（如刪除、編輯）。但不要將長按作為主要操作方式。
- 雙指縮放：用於圖片與地圖。確保不被 CSS 禁止（
touch-action: manipulation）。
四、效能優化
行動裝置的網路環境通常不如桌面穩定，效能優化更為關鍵。
4.1 延遲載入（Lazy Loading）
使用原生的 loading="lazy" 屬性或 Intersection Observer API 實現圖片與非首屏內容的延遲載入：
<img src="photo.webp"
loading="lazy"
decoding="async"
alt="產品圖片"
width="800" height="600">4.2 關鍵 CSS（Critical CSS）
將首屏所需的 CSS 直接嵌入 HTML 的 <style> 標籤中，其餘 CSS 透過非同步方式載入。這能確保使用者在第一次繪製時就能看到完整的視覺內容，減少 Cumulative Layout Shift（CLS）。
4.3 字型載入優化
中文字型檔案體積龐大（通常 5-10MB），對行動裝置的影響特別明顯：
- 使用
font-display: swap避免文字隱藏 - 限制字型權重數量（建議不超過 3 種）
- 使用
unicode-range分段載入，只下載頁面實際使用的字元 - 考慮使用系統字型堆疊作為回退方案
五、測試與驗證
完成設計後，務必在真實環境中進行測試：
- Chrome DevTools 裝置模擬：快速測試不同螢幕尺寸與網路環境
- 真實裝置測試：至少在 iOS 與 Android 各一台真實裝置上測試
- Google Mobile-Friendly Test：確認 Google 視你的網站為行動友善
- Lighthouse：檢查效能、無障礙、SEO 等各項評分
- 跨瀏覽器測試：Safari、Chrome、Firefox、Samsung Internet
六、實用清單
Mobile First 設計的關鍵檢查項目：
- ☐ CSS 使用 min-width（Mobile First 寫法）
- ☐ 所有可互動元素不小於 48x48px
- ☐ 圖片使用 lazy loading 與響應式圖片
- ☐ 字型載入已優化（font-display: swap）
- ☐ 觸控手勢有明確的視覺回饋
- ☐ 表單輸入使用正確的 input type
- ☐ 影片不自動播放（除非靜音）
- ☐ 通過 Google Mobile-Friendly Test