Solution 要做什麼
對照完整答案、責任邊界與原因。
本主題檔案：files/index.html
定位：先看 CSS layout 的真實 slot width，再檢查 sizes 是否描述相同規則。
Solution · code-edit
srcset 與 sizes
對照完整答案、責任邊界與原因。
本階段驗收
頁面不會替你修改檔案；請在實作檔完成後重新整理確認。
目前要處理
img 有兩個 width descriptor candidates，sizes 暫為 100vw。
預期看到
runtime 的 sizes attribute 真正更新；完整 image probe 在不同 viewport 回報 currentSrc、naturalWidth 與選中候選。
<img src="service-640.svg" srcset="service-320.svg 320w, service-640.svg 640w" sizes="(max-width:480px) 100vw, 50vw" alt="到府服務人員整理空間">檔案清單
只在本階段資料夾內操作，避免改到其他章節。
index.html
入口 HTML：提供六張服務卡、聯絡區塊、表單欄位與選用的測量按鈕。style.css
CSS 樣式：控制流動容器、Grid 欄位、breakpoint、focus 與 checkpoint 缺口。main.js
選用測量工具：讀取 viewport、scrollWidth、clientWidth 與 computed 欄位，不輸出硬編碼通過訊息。
證據：現有 runtime before=100vw、after=(max-width:480px) 100vw, 50vw、attribute=sizes；完整證據需 currentSrc/naturalWidth/candidateByWidth
回到主題說明