上个月帮朋友改了个老网站，现有修改问题比预想的网站棘手得多。

那是支持个2015年做的企业官网，电脑上看还行，手机一掏出手机，浏览导航栏挤成一团，现有修改图片撑破屏幕，网站点个按钮还得放大缩小。支持朋友说客户在手机上打开后直接关掉，手机订单少了一大截。浏览这其实不是现有修改个例——很多老网站都死在这上面。

改支持手机浏览，网站核心不是支持“加个响应式布局”就完事。你得先搞清楚，手机手机用户和电脑用户的浏览使用场景根本不同。电脑上人家可能慢慢逛，手机上大多是一边排队一边刷，或者在地铁上快速查个信息。手指头粗，屏幕小，网络还可能不稳定。这决定了修改思路必须从“适配屏幕”转向“适配场景”。

我接手后干的第一件事，是把所有页面在手机模拟器里过一遍。不看不知道，那个网站的导航下拉菜单在手机上要连点两次才能展开，第二次还经常误触跳到别的页面。这种细节，光靠技术检测发现不了，得真拿手指头去戳。

技术层面，老网站改手机适配有几条路。最省事的是加一段viewport meta标签，再写一套媒体查询，把布局调成单列。但前提是原代码别太乱。我那个朋友的网站，CSS里全是绝对定位，改起来像解一团毛线。后来索性把关键页面重写了，用flex和grid重新排。这活儿没捷径，只能一页页过。

图片是另一个坑。老网站用的都是大尺寸原图，一张两三兆，手机流量下加载要好几秒。我全部换成响应式图片，用srcset属性按屏幕宽度加载不同尺寸。还有那些装饰性的背景图，能删就删，换成纯色或渐变。手机屏幕本来就小，没必要为一张花哨的图牺牲加载速度。

按钮和点击区域得单独处理。手机上最小的可点击目标建议是44×44像素，否则容易误触。我把那个网站的“提交表单”按钮从原来的30像素高加大到48像素，旁边还留了间距。改完自己试了试，拇指点上去舒服多了。

字体大小也得调。原来正文设了12像素，在手机上看跟蚂蚁爬似的。我改成16像素起步，行高也放宽，保证在阳光底下也能看清。别迷信什么“小字显高级”，手机用户没那个耐心放大看。

改完之后我让朋友拿真机测，别用模拟器。他一开始还嫌麻烦，后来发现iPhone和安卓的显示效果差不少——安卓上有些浏览器对CSS的支持有偏差，比如老版本的微信内置浏览器，对flex的兼容性就一般。最后加了几个针对性的hack才搞定。

改版上线两周，朋友打电话来说，手机端咨询量翻了一倍。其实我一点不意外。老网站改手机支持，不是赶时髦，是救命的活儿。现在还有大量中小企业网站停留在“电脑时代”，客户用手机访问体验极差，等于把送上门的机会往外推。

如果你手头也有个老网站要改，别急着套模板。先拿手机打开看看，真实用一次，感受一下哪里别扭。然后从导航、图片、按钮、字体这四个最影响体验的地方下手。技术方案都是现成的，难的是你有没有耐心去抠那些细节。手机屏幕就那么大，每一寸都得算计着用。