上周三凌晨两点，工作群直接炸了。
运营甩过来三张截图，首页的满减优惠券按钮在iPhone SE上被挤到了屏幕最边缘，半拉身子卡在折叠屏的缝隙里，用户点都点不到，后台半小时已经堆了十七八条客诉。
我盯着屏幕愣了三秒。
这鬼东西我们前前后后调了三周，测了二十多台模拟设备，怎么就栽在这台没人提过的老机型上？
别上来就扯单位换算
很多人刚接适配需求，第一反应就是翻教程，什么rem、vw、媒体查询，恨不得把开源适配库直接扒下来贴到项目里。
我见过最离谱的实习生，上来就把所有px全转成rem，改完一测，在折叠屏展开的状态下，首页标题字大到能占满半个屏幕。
说真的，适配的核心根本不是把单位换算对。你连自己的用户用什么设备都不知道，搁那瞎调什么呢？
之前我们团队踩过一次大雷，开发全用的是iPhone14Pro，测出来的页面在他们手机上完美无瑕，上线才发现有32%的用户用的是宽度360px的安卓千元机，还有2.1%的折叠屏用户展开后宽度到了840px，原来的固定宽度布局直接被拉变形。
后来我们强制要求，接适配需求的第一步，先拉后台最近三个月的设备数据，把占比前90%的机型列出来，剩下那种占比0.1%的老古董，除非是做老年机适配的垂直业务，不然根本不用管。
别拿你自己的手机当用户的全部，这话我们现在写在团队规范的第一行。
最容易漏的是交互断点不是尺寸
很多人对适配的理解还停留在“视觉对齐”，只要字不歪、按钮不重叠就算完事，根本不管不同尺寸下的交互逻辑有没有问题。
上个月有个做本地生活的朋友找我，说他们的结算页在安卓小屏上，提交订单的按钮被软键盘顶到了看不见的地方，用户付完款都找不到确认键，一周转化率掉了12%。我过去一看，他们根本没做软键盘弹出后的布局调整，还是按固定高度写的页面。
这种坑真的太多了。
比如导航栏有五个入口，在宽度大于768px的时候横向排开刚好，到了窄屏上，很多人要么硬缩把按钮挤成一团，要么干脆不管，小屏幕上按钮叠在一起，用户点一次错一次。还有的表单，宽屏上做的左右两列布局，到了窄屏上还是硬塞，输入框窄到连11位的手机号都显示不全。
我上次刷一个技术博客，在折叠屏上展开之后，一行有快一百个字，我眼睛都看瞎了，滑了三屏才看完一篇千字文章。就不能给个最大宽度限制吗？真的服。
所谓的适配断点，根本不是“到了多少px就改字号”这种死规则，是到了某个尺寸，你就得换一套交互逻辑。比如窄屏下把多余的导航收进汉堡菜单，折叠屏展开后给内容加个最大宽度，软键盘弹起时自动把核心按钮顶到可视区域里。
检查清单别直接抄网上的模板
现在网上随便一搜，就能找到一大堆移动端适配的检查清单，什么“测一遍iPhone全系列”“测一遍主流安卓机型”，大部分都是通用模板，根本不符合你的业务实际。
我们现在的检查清单是自己一点点攒的，每踩一次坑就加一条，现在已经有十几条了：
软键盘弹出后核心操作按钮不能被遮挡，折叠屏展开后内容最大宽度不超过750px，小屏上所有可点击元素的热区不小于48px，页面不能出现横向滚动条，每一条都是我们之前踩过的坑。
还有一点很多人不知道，模拟器测出来的结果根本不算数。之前那个优惠券按钮的坑，在模拟器上刚好能点，但是在真实的SE上，因为屏幕小，触摸热区只有24px，用户的手指根本碰不到。后来我们把按钮的热区扩大到了48px，不管屏幕多小，手指都能准确点到，客诉当天就消了。
更重要的是，适配根本不是前端一个人的事。产品经理画原型的时候，就应该把不同尺寸下的布局标清楚，设计师出图的时候，就应该出至少三套尺寸的稿，而不是只出一套宽屏的，扔给前端自己想办法适配。我见过最离谱的设计，给了个750px的稿说你自己看着缩，最后出来的效果和设计稿差了十万八千里，还反过来怪前端不会做。
其实移动端适配哪有什么银弹啊。
无非就是多站在用户的角度想，你用的手机不是所有人的手机，你觉得顺手的布局，在别人那可能就是个跨不过去的坑。
上次我们改完那个SE的问题，第二天后台的领券率就涨了8%。你看，就改了一个小小的热区，效果比你瞎调半天单位换算有用多了。