上周一家做机械设备的客户打电话过来，语气挺着急：业务员用手机给客户展示官网，结果首页乱得没法看，轮播图只出来半截，产品参数表直接撑出了屏幕右边。电脑上明明好好的，怎么换到手机上就散架了？这类问题在网站建设行业里特别常见，说到底，是移动端适配这一环没做扎实。电脑屏幕和手机屏幕的宽度差着好几倍，浏览器处理页面的方式也不一样，随便省掉一步，手机上就会出问题。而且这些问题平时根本测不出来，非得真机上手才现形。
排版乱掉的几个常见来源
最常见的是没设 viewport 标签。手机浏览器为了兼容老网页，默认会假装自己是一块 980 像素宽的屏幕，把整个页面缩小塞进手机里，于是字小得看不清，点击区域也跟着缩没了。其次是图片和表格写死了像素宽度，屏幕变窄它们却不跟着缩，溢出后把整行版式都顶开。还有一种情况是轮播图、导航这类组件只按桌面端的逻辑写，到小屏幕上定位错乱，出现半截图或者文字叠在一起。哪种情况对应哪种修法不一样，但共同点是：这些都不会在电脑上暴露出来，只有换到小屏幕才会现形，所以很多问题直到客户真机打开那天才被发觉。
怎么排查，从哪查起
- 用手机打开页面，先判断是整体被缩小，还是局部元素溢出，前者多半是 viewport 的问题，后者要盯具体元素。
- 重点看产品参数表、价格表格这类宽内容，有没有做横向滚动处理，没有的话很容易撑破版面。
- 换个浏览器再试一次，微信内置浏览器和手机自带浏览器的表现不完全一样。
- 手机横过来再看一遍，横屏状态下布局错乱的问题更容易暴露。
还有一点容易被忽略：交付的时候是好的，不代表一直好。客户后来自己在后台上传的图片、粘贴的内容，同样会影响手机上的显示效果，这跟程序本身没关系，但访客只会觉得网站不行了。
给两条实在建议
第一，验收网站时别只开电脑，借同事朋友的手机多开几台，重点看导航、表单、图片这三样。第二，找建站公司谈合作时，把移动端适配的验收标准写进合同，比如安卓和苹果各测几台机型，出了问题多长时间响应。这两条看着琐碎，真出了纠纷，就是你手里唯一的依据。像比格网络这类团队在交付前会做完整的移动端测试，但这一条仍然值得你白纸黑字确认下来，省得日后扯皮。
