移动端适配：怎样记录变更与复盘-用清单管住改动
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /498e10cec5cf.html
📄
移动端适配：怎样记录变更与复盘-用清单管住改动
移动端适配的记录与复盘，核心做法是每次改动都留下“改前状态、改动内容、改后验证”三行记录，并按同一套检查项定期回看。时间和人手有限时，先记录影响面最大的改动，例如视口设置、断点、图片与字体尺寸、点击区域，再逐步补齐细节。记录的目的不是写文档，而是让下一次改动能判断“是否真的变好”，以及出问题时能快速回退。
先查什么：建立一份最小变更台账
要查的是“这次改了什么、为什么改、怎么验证”。怎么查：用一个表格或文档，固定四列——日期与页面、改动内容、验证方式、结论。结果说明：如果某次改动只写了“优化移动端”，没有具体页面和验证方式，这条记录无法用于复盘，应补写或作废。适用条件是任何一次上线前都能用；判断结果是台账条目能否让第三方看懂改了什么。
检查项一：视口与基础布局是否被改动
要查的是 viewport 元标签、容器宽度、横向滚动。怎么查：在浏览器开发者工具中切换到手机尺寸，检查页面是否出现横向滚动条，并查看 viewport 内容是否为 width=device-width, initial-scale=1。结果说明：出现横向滚动，说明有元素超出视口，可能是固定宽度、负边距或长单词未换行。适用条件是页面结构改动后必查；判断结果是横向滚动消失且内容不被迫缩小。
检查项二：断点与内容重排是否一致
要查的是常用断点下导航、表格、卡片是否正常重排。怎么查：依次在窄屏、中屏、宽屏三档宽度下截图，记录每档的布局差异。结果说明：如果某一档出现文字重叠或按钮被遮挡，说明该断点下的样式未覆盖到。适用条件是响应式页面调整后；判断结果是三档截图都能看清主要操作，且不需要放大页面。
检查项三：图片、字体与点击区域
要查的是图片是否按容器缩放、字体是否小于可读下限、按钮是否便于点按。怎么查：在手机尺寸下放大页面，观察图片是否溢出、文字是否需要左右拖动、按钮是否容易误触。结果说明：图片溢出通常与固定宽高有关；文字过小与字号单位有关；按钮过密与间距有关。适用条件是内容页和表单页；判断结果是主要操作在单手握持下能完成，不需要反复缩放。
复盘怎么执行：按固定节奏回看记录
要查的是上一轮改动是否达到预期。怎么查：每隔一个固定周期，例如两周，把台账中“结论”为待观察的条目挑出来，用同一套检查项重新验证一次。结果说明：如果同一问题反复出现，说明上次只改了现象，没有改到原因，应把原因写进下一条记录。适用条件是改动频繁但人手有限时，优先复盘影响用户操作的条目；判断结果是能明确说出“哪条改动有效、哪条需要回退”。
下一步：先为最近一次移动端适配改动补一条台账，写清改前状态、改动内容和验证方式，再按上面的检查项逐条确认，把无法确认的条目标为待复查。
