移动端模板适配避坑清单

移动端模板看起来只是把布局压窄，真正的问题往往藏在交互细节和内容边界里。同一套模板在不同屏宽、不同字号、不同输入方式下表现差异很大，若只在一种设备上验收，上线后就会被零散反馈拖住。以下按验收顺序给出清单。

一、断点不是越多越好，关键在内容转折点

常见误区是按设备型号设断点，结果断点数量膨胀且互相干扰。更稳的思路是按内容自身的转折点设断点：当一行文字开始拥挤、当并排卡片开始挤压、当导航项开始换行，这些才是断点信号。做法是把窗口从窄到宽连续拖动，观察哪一档开始出现挤压或空洞，在那一档设断点。

同时要避免“断点之间无人区”。若两个断点跨度太大，中间宽度会出现既不像窄屏也不像宽屏的尴尬布局。建议在断点之间抽查两到三个中间宽度，确认布局是平滑过渡而非突变。

二、触控目标与手势冲突

移动端的点击目标不能按视觉尺寸判断，要按可点击区域判断。常见问题是图标看着够大，实际热区只有图形本身，边缘点不中。检查方法是逐个点击目标边缘，确认四周留白是否也在热区内。相邻可点元素之间要留出足够间距，避免误触。

手势冲突更隐蔽：页面内横向滑动区域与系统返回手势、与整页滚动可能互相抢占。验收时要专门测试在横向卡片上从边缘起手滑动，观察是否触发预期行为。若模板自带轮播，要确认轮播是否吞掉了纵向滚动，导致页面卡在半屏。

三、内容溢出与极端文本

模板演示常用短文案，真实内容往往更长。必须准备极端文本集：超长单词、连续数字、多语言混排、全大写、带大量标点的句子。逐项观察是否撑破容器、是否出现横向滚动条、是否把相邻元素挤出视口。

还要测字号放大场景。使用者在系统里调大字号后，固定高度的容器最容易出问题：文字被裁切、按钮文字溢出、行高错乱。检查项包括：容器是否用最小高度而非固定高度、文本是否允许换行、图标与文字并排时是否会自动堆叠。

四、性能与首屏

移动端模板常引入较多装饰性资源，首屏容易变重。验收时关注三点：首屏可见内容是否依赖大图、滚动时是否出现明显掉帧、交互反馈是否有延迟。做法是在网络受限条件下加载，观察骨架或占位是否及时出现，避免白屏等待。

另外要检查图片是否按容器尺寸请求合适规格，而不是统一拉大图再缩放。装饰性动画应可被系统减弱动效设置关闭，否则对敏感人群不友好。

五、上线前自查清单

断点是否按内容转折设定；断点之间是否抽查中间宽度；可点区域是否含四周留白；相邻热区是否留间距；横向滑动是否与系统手势冲突；轮播是否吞掉纵向滚动；极端文本是否撑破容器；放大字号后是否裁切；首屏是否依赖大图；减弱动效设置是否生效。逐项打勾后再交付，能省下大量返工。