你有沒有遇過這種情況：網路慢到爆、手機快沒記憶體，結果網頁還硬是要載一堆大圖和特效，整個卡到不行？其實，網頁不只可以根據螢幕大小調整排版，還能「感知」你的裝置狀況，像是網路快慢、記憶體多寡、CPU 有幾顆核心，然後自動幫你調整體驗！

說真的，我以前完全沒聽過這些取得環境/裝置狀況的 Web API，原來 UX 還能從這種細節下手，真的是太細緻了！😳

今天就來聊聊這些環境/裝置資訊 API，讓你的網頁不只會 RWD，還能變得更聰明、更貼心。你會發現，這些小細節其實能大大 提升使用者的體驗！

Network Information API

透過 navigator.connection 取得網路相關資訊：

if ('connection' in navigator) {
  const c = navigator.connection;
  console.log('類型:', c.effectiveType); // e.g. '4g', '3g'
  console.log('下載速率估計:', c.downlink, 'Mbps');
  console.log('RTT:', c.rtt, 'ms');
  console.log('數據是否受限:', c.saveData);

  c.addEventListener('change', () => {
    console.log('網路狀態變更:', c.effectiveType);
  });
}

• effectiveType：粗略的網路品質分類（2g/3g/4g/slow-2g）。
• downlink：估計下載東西的速度（單位是 Mbps）。
• rtt：Round Trip Time（單位是毫秒），延遲估計，數字越低，網路反應越快。
• saveData：使用者是否開啟「省流模式」，像是手機在省流量時，網頁就會自動幫你少載一點東西，節省流量。

應用場景：

• 網路慢時 → 載低畫質圖 / 延後載入次要 JS。
• 省流模式開啟 → 優先只載必要資源。

Device Memory API

透過 navigator.deviceMemory 取得裝置的記憶體大小（以 GB 為單位，數值為近似值）：

console.log('記憶體大小 (GB):', navigator.deviceMemory);

• 常見值：0.25, 0.5, 1, 2, 4, 8。
• 代表裝置大約有多少 GB RAM。
• 記憶體越大，裝置可以同時處理更多事情，網頁也能跑得更順。

應用場景：

• 低記憶體（≤1 GB） → 關閉動畫、載精簡版圖片。
• 高記憶體（≥4 GB） → 啟用進階特效、載完整大圖。

Hardware Concurrency API

透過 navigator.hardwareConcurrency 取得 CPU 邏輯核心數：

console.log('CPU 邏輯核心數:', navigator.hardwareConcurrency);

• 常見值：2、4、8…（取決於裝置）。
• 多數手機 ≥4 核，筆電 ≥8 核，桌機更多。
• 核心越多，裝置可以同時做更多事，速度也會比較快。

應用場景：

• 平行計算（Web Workers）：依核心數決定要開多少 worker。
• CPU 少 → 減少併發任務、避免卡頓。
• CPU 多 → 可以開更多並行處理（如影像壓縮、多資料流）。

綜合應用範例

想像一個情境：影片播放網站。

function getConfig() {
  const config = {
    videoQuality: '1080p',
    enableEffects: true,
    workers: 4,
  };

  // 網路慢 → 降低影片畫質
  if ('connection' in navigator) {
    const c = navigator.connection;
    if (c.effectiveType.includes('2g') || c.saveData) {
      config.videoQuality = '360p';
    } else if (c.effectiveType === '3g') {
      config.videoQuality = '720p';
    }
  }

  // 記憶體小 → 關閉特效
  if (navigator.deviceMemory && navigator.deviceMemory <= 1) {
    config.enableEffects = false;
  }

  // CPU 少 → 減少 worker 數
  if (navigator.hardwareConcurrency) {
    config.workers = Math.min(2, navigator.hardwareConcurrency - 1);
  }

  return config;
}

console.log('依裝置狀況調整設定:', getConfig());

在這個範例中：

• 網路慢 → 降低影片畫質。
• 記憶體小 → 關閉特效。
• CPU 少 → 減少 worker 數。

這就是「智慧版 RWD」：不只是排版，還包括效能與體驗。

限制與注意事項

• 支援度不均：
  • Network Information：桌面版支援差，主要是 Android Chrome。
  • Device Memory / Hardware Concurrency：Chrome/Edge/Opera 支援，Safari 幾乎沒有。
• 安全隱私：這些 API 只回傳「粗略值」，避免洩露過多指紋資訊。
• 建議作法：用作「提示」而不是「絕對條件」。例如「低記憶體 → 降級」，而不是「低記憶體 → 禁止進入」。

小結

這三個 API 都屬於「環境感知 (Context-Aware)」的一環：

• Network Information：知道網路好不好。
• Device Memory：知道記憶體多不多。
• Hardware Concurrency：知道 CPU 強不強。

把它們加在一起，網站就能「有感知地」調整策略。
雖然支援度有限，但在 漸進增強 (Progressive Enhancement) 的思路下，這些 API 可以幫助我們寫出更聰明、更體貼使用者的網頁體驗。

👉 歡迎追蹤這個系列，我會從 Canvas 開始，一步步帶你認識更多 Web API 🎯