电脑上做得挺好看的网站，用手机打开经常出现各种问题。字小得看不清、要左右滑动、按钮点不到、图片被裁掉一半。这些问题在电脑上测试时看不到。
下面这六处是实际测试中最容易出问题的。
一、表格
参数对比表是重灾区。电脑上横向六列排得整整齐齐，手机上放不下，只能左右滑动。用户滑到右边就忘了左边是什么。
处理方式有几种。改成纵向排列，每个型号一段，字段名在上数值在下。或者把不重要的列隐藏，只留核心的几列。或者做成可横向滑动的卡片，每张卡片一个型号。三种都比硬塞在一个宽表里好。
二、图片
电脑上的大图到手机上会被压缩得很小，细节全看不清。特别是那种带文字的海报图，手机上完全读不出来，用户只能放大再左右移动。
做法是按屏幕宽度适配，手机上换成竖版或者适合小屏的图。带文字的宣传图，最好做成两版，或者干脆把文字做成网页文字而不是压在图里。同一张图里有大量文字是最糟糕的处理方式。
三、弹窗
电脑上的弹窗一般放在页面中间，尺寸固定。手机上如果弹窗做得太大，关闭按钮又放在右上角够不到的位置，用户会卡住。
手机弹窗要做成占满宽度、从底部升起的样式，关闭按钮要明显并且好点。还有就是不要一进页面就弹窗，手机上突然弹出的窗口特别打断体验。
四、表单
手机输入比电脑麻烦，表单字段多的时候填写率会大幅下降。手机上的表单还要注意键盘弹出时会不会挡住正在填的字段，这是很常见的问题。
处理思路是精简字段、用选择代替输入、输入框要够大够好点。键盘弹出时页面要自动上滚，让当前字段保持可见。日期用选择器，不要让人手打。
五、导航和按钮
横向导航在手机上要收进菜单里，这个多数网站做到了。容易出问题的是点击区域太小，文字链之间挨得太近，用户点错了位置。
按钮和链接的高度建议在四十像素以上，链接之间的间距也要留够。手指点击的精度比鼠标差，太小的目标很难点准。
六、字号和行距
电脑上十四像素的正文，手机上看着还行但实际偏小。中文字符笔画多，小字号下细节糊成一团。手机正文建议不低于十五像素，重要内容十六像素以上。
行距也要跟着调整。手机上屏幕窄，每行字数少，行距太挤会显得密不透风。同时要注意页面两侧要留出边距，紧贴屏幕边缘的文字不好读。
验收时怎么查
做出来之后，用手机把每个页面都过一遍。重点看这几处，有没有需要左右滑动的页面，有没有文字被裁掉的地方，有没有点不到或者点错的地方。这些在电脑上都不容易发现。
除了自己的手机，最好再找一台屏幕更小的安卓手机测一遍。不同设备的差异比想象中大，特别是小屏安卓机，很多布局问题只有在这类设备上才暴露。
下一篇网页字体的选择原则