上个月有个做汽配的老板找我，说网站在电脑上挺好，手机打开却要不停放大缩小才能看清字。他怀疑是手机坏了，又换了三部手机试，全都一样。我让他把网页源代码发来一看，头部的viewport标签压根没写。一个几乎零成本的疏忽，让整套网站在手机上等于裸奔。
一行代码，决定手机怎么看待你的页面
手机浏览器有个默认逻辑：拿不准页面宽度时，就按九百多像素的虚拟宽度去渲染，再整体缩小塞进屏幕。这就是为什么没写viewport的网站，手机上看起来像一张缩小的报纸。viewport标签的作用，是明确告诉浏览器：请按设备真实宽度渲染，别自作聪明。做响应式网站设计时，这一行是地基中的地基，缺了它，后面所有的布局、断点、图片适配全都白搭，因为浏览器根本没按真实尺寸来干活。
更麻烦的是，这个缺失不会报错。设计师在电脑上看效果一切正常，客户验收要是在电脑上做，这问题能一直活到上线之后。我们接手过好几个别人做了一半的项目，查到最后都是这一行没写。
三个连锁反应，一个比一个伤
- 体验掉档：客户进首页先得捏着屏幕放大，操作三步就烦了，跳出率高得吓人；
- 表单废掉：输入框小得点不中，放大后页面乱跳，询盘填一半就放弃；
- 排名受损：谷歌的移动端测试直接判不适合移动设备，等于给排名踩了刹车。
还有个反向误区要提醒：有人听说缩放不好，就在代码里把用户缩放禁死。这样页面是不缩了，可老花眼的客户想放大看参数，也放大不了。正确做法是保留缩放能力，靠排版本身把字号做到位，两头都照顾到。
两分钟自查法
电脑上打开自己的网站，按F12调出开发者工具，切到手机模拟模式，页面要是排得整齐，说明viewport大概率在；再翻一眼源代码，头部有没有那行viewport的meta声明，有就踏实了。手机上更直观：打开网站不用任何手势就能舒服阅读，就是合格；凡是需要先放大再操作的，都有问题。这一行代码修复起来不过几分钟的事，但要先有人发现它，才有得修。顺带说一句，viewport写错也不少见：宽度定死、缩放锁死，都属于这一行的故障范围，检查时一并看掉。
建议你现在就掏出手机看看自己的网站，有问题的让建站方当天就改，这种修复不值得排期。要是找新团队做站，把viewport这条写进验收清单，比格网络交付项目时这类基础项都有专门的核对表，宁可交付前多花一小时，也不给客户留一个能看见的毛病。类似的小检查还有很多，做响应式网站设计，功夫都在这些不起眼的细节上。
