18年沉淀高端建站经验
为企业持续赋能品牌新价值
多设备适配的活干完，最容易漏的是验收。在电脑上把窗口拉窄看着没问题，拿到真机上按钮被虚拟键盘顶出屏幕，这种问题只有真机才暴露。
设备按屏幕宽度分三档，分别是小屏手机、大屏手机，以及平板和电脑。浏览器至少覆盖微信内置、系统自带和主流第三方三家。输入方式分触摸和鼠标两种。三个维度组合起来，一轮验收大约 18 个格子。
断点设在布局开始挤的位置，不按设备型号设。常见是 768px 和 1024px 两个，再加一个 375px 做小屏兜底。断点越多，要验的格子越多，维护成本跟着涨。
| 设备 | 浏览器 | 重点看什么 |
|---|---|---|
| 小屏手机 | 微信内置 | 表单与弹窗是否可用 |
| 大屏手机 | 系统浏览器 | 字号与按钮间距 |
| 平板 | 第三方浏览器 | 表格与图片溢出 |
| 电脑 | 主流浏览器三家 | 宽屏留白与导航 |
表格在窄屏溢出，整页能横向拖动。图片没设最大宽度，撑破容器。弹窗在手机上高度超过视口，关闭按钮跑到屏幕外点不到。
适配解决布局，加载解决耐心。移动网络下首屏超过 3 秒，用户大概率会退出。适配和加载的检查项可以放在同一轮做， target="_blank"里有流程参考。
验收记录要留档，改版时对照上一轮的结果，能看出哪些毛病在反复出现。同一个问题出现两次以上，就该改代码结构，别一直打补丁。
