响应式网站手机端显示异常怎么排查

上周去一家做紧固件的企业做验收，负责销售的副总把手机递过来：“你打开看看，电脑上正常，手机上右边多出来一截。”我横向滑了一下，页面确实会左右晃，产品说明被切掉半行。这类情况在响应式网站上出现的频率，比很多人以为的高。

先分清是“溢出”还是“没适配”

看着像同一回事，处理方式其实不同。判断方法很简单：在手机上把页面横向拖一下，如果能整体滑动，说明有元素超出了屏幕宽度，这是溢出；如果拖不动，但内容挤成一团、字号小到看不清，那是断点没做适配。前者是某个元素的问题，后者是整体方案的问题。先分清再动手，能省掉一半无效修改。

溢出最常见的是三类元素

第一类是图片和表格。后台传了一张一千像素宽的产品图，前端没限制最大宽度，它就会把容器顶开。参数表更麻烦，列数一多，最小宽度必然超过手机屏幕。稳妥的处理是给表格外面套一层可以横向滚动的容器，让表格自己滚，而不是拖着整个页面晃。

第二类是写死的固定宽度。有些老模板里留着 width:1200px 这样的值，电脑上没问题，到手机上直接溢出。把固定宽度换成 max-width 加百分比，通常能解决大半。

第三类是没有空格的长串。型号、货号、邮箱地址这类内容，浏览器找不到断行的位置，也会把容器撑开，补一句 word-break 或者 overflow-wrap 就能压住。

断点没适配，问题往往在中间那一段

响应式网站一般会设几个宽度断点，1200、992、768、480像素是常见的一组。如果只设了768一个，那么768到992之间的平板设备就会落进电脑端的样式里，出现“比上不足比下有余”的错位。检查的时候不要只在手机上滑，把浏览器窗口从宽到窄慢慢收，看在哪一段开始变形，问题基本就定位到了。

还有一个常被忽略的来源：内容

我们遇到的案例里，有相当一部分不是代码写错，而是有人从Word里直接复制粘贴，带着内联样式和表格一起进了后台。这种内容在前端任何断点下都可能出问题，改CSS也改不掉，只能回后台重新清理。编辑器如果做了粘贴过滤，能挡掉一部分；没做的，就得靠编辑的习惯。定期把后台内容也过一遍，比反复重构模板划算。

辉耀网络交付网站时会做一轮真机检查，主流机型各过一遍，清单里包括横向溢出、字号可读性和按钮点击区域。这件事说起来简单，难的是有没有人真的拿着手机逐页看过。网站上线以后自己发现哪一页不对，也可以随时找我们，多数时候只是加了一张大图或者粘了一段表格，改起来很快。

写在后面

页面上的问题，多半不是“技术难”，而是“没人看”。找个安静的下午，把主要栏目在手机上从头翻一遍，把不对的地方记下来，再决定要不要改版，比在会议室里讨论半天更管用。