# 测量与还原校准

视觉判断负责选区、主体、构图和字体层级；程序负责尺寸、坐标、颜色统计与偏差。先确认原图尺寸与 CSS 逻辑视口的映射，截图像素不能直接当作 CSS 像素。

## 选择验证范围

- 浏览器页面精准还原：执行下方完整流程，字段和命令按 [测量与采集接口](reference-measurement.md) 使用。
- 组件局部修改：只标注目标区域和必要的相邻锚点，可复用已核对的基线，不要求重新标注整页。
- 只有图片或非 DOM 渲染：保留图像测量，使用接口文档的图片比较分支；小程序、canvas 等使用对应工具取证，不伪造浏览器元数据。

## 实现前建立基线

1. 选择少量关键锚点：区块起点、容器边距、重复网格、标题与素材容器。按原图像素填写区域清单；浏览器还原同时填写预计选择器、页面地址、视口和截图条件。
2. 运行 `measure_reference.py`，打开标注图确认范围，再检查颜色与几何统计。选区不准先修清单；程序不会自动识别正确边界。
3. 从统计选择少量公共变量和布局约束。浏览器还原运行 `prepare_capture.py` 生成首轮采集文件，将测量事实、推断和实现选择分开记入 `round-notes.md`，再编写布局与样式。

测量时保留这些区别：

| 对象 | 判断方式 |
| --- | --- |
| 色面 | 在内部避开文字、摄影和高光；同时看中位数与分位数，波动大时检查渐变或污染，不把每个采样值变成 CSS 变量 |
| 重复组件 | 比较宽度与间距分布；小幅采样波动可归为公共规格，明显不同的比例应保留，不先假定等宽 |
| 文字 | 元素外框、文本行盒和可见字形分别判断；字形框不参与 DOM 外框比较，不能靠缩短标题块宽度修复字形差异 |
| 装饰与素材 | 斜切边界与正文几何分开；图片按既定容器比例、主体位置和遮挡范围检查，规格冲突时回到素材流程 |

## 实现后采集与验收

1. 启动本地服务并核对项目身份。端口冲突时保留原进程、另选端口并更新基线；启动失败不继续导航。静态 HTML 可用接口文档的 `--preflight` 检查，退出码为 0 才继续；动态应用按项目实际身份标记核对。
2. 按宿主浏览器流程打开目标页面，核对实际 URL、标题、视口和 DPR。每轮重新读取，不假定模拟设置跨导航或会话保留；页面身份不符时停止交互，截图条件不符时重新设置并采集。
3. 等待字体和图片完成，检查本轮替换资源是否真正更新；背景图、视频和 canvas 需额外检查。冻结动画或等待稳定状态，采集期间不改变页面、滚动、视口或资源状态。
4. 在主文档执行本轮 `collect.js`，将真实元数据与截图保存为 `capture.json`、`candidate.png`。元数据中的 `full_page` 和 `screenshot_scale` 必须来自实际截图选项，再运行 `verify_capture.py`。
5. 读取诊断与偏差报告，在目标显示尺寸下目视复核并实际操作。程序检查通过只表示采集前提成立，不证明没有遮挡、字体正确或交互可用。

人工与操作验收集中检查：

- 元素实际显示，内部布局与外框一致，素材没有遮挡文字、控件或导航。
- 真正用于字符渲染的字体、字重、行高和换行符合参考；CSS 候选列表与字体加载完成不能证明选中了原字体。
- 主要操作、失败反馈、长内容和响应式切换正常；切换后复核导航、换行与内容高度。
- Logo、细字和素材边缘按最终显示大小及目标 DPR 检查，不能依靠长页缩略图。240×80 CSS 区域在 DPR 2 下需要 480×160 的设备像素截图才能作为该分辨率的证据。

## 修正与复验

引用 `geometry.md` 的区域名，在 `round-notes.md` 记录本轮假设、调整变量及观察到的收益与退步。连续区块同向偏移时，先查最早发生偏移的位置；调整顺序为页面宽度与容器 → 字体与换行 → 间距 → 素材裁切与装饰，不给后续区块逐个打位移补丁。

下一轮从同一测量结果生成新目录，重新采集，并通过 `--previous` 比较前轮报告。参考图、标注或截图条件改变时重新测量建立基线，不沿用前后改善结论；条件失败时保留原始记录，修正后重采，不改派生文件绕过检查。

像素差异和几何偏差帮助定位变化，不转换成“还原度百分比”。摄影、近似字体和品牌原稿缺失造成的差异单独说明。最终结论同时依据局部画面、程序报告和真实操作；案例与轮次记录留在任务目录。