做响应式页面时，先把 viewport 的含义想明白

响应式设计刚开始被大量讨论时，很多教程都会先让你加上一行 viewport。代码看起来很简单，但如果只会照抄，不理解它在手机浏览器里到底改变了什么，后面布局一出问题还是容易手忙脚乱。

默认的移动浏览器并不会按你想象的宽度展示页面

如果页面没有明确声明 viewport，很多手机浏览器会把网页先当作桌面站点来排版，再整体缩小给你看。这样一来，页面虽然“看起来都在一屏里”，字却很小，按钮也难点，根本谈不上真正适配。

把 viewport 配成接近设备宽度，本质上是告诉浏览器：不要先替我做一层桌面页面的缩放假设，先按实际可视区域来布局。

这一步之后，流式宽度才真正有意义

不少人会疑惑，明明容器写了百分比，为什么在手机上还是像缩小的桌面页。往往问题就出在这里。浏览器一旦还是拿一个更宽的虚拟画布去排版，你那些百分比只是对着错误的基准在算。

所以 viewport 并不是一个额外优化项，而更像响应式布局的起跑线。先把基准宽度放正，媒体查询、流式栅格、图片缩放这些手段才有发挥空间。

还要顺手检查字号和可点击区域

移动端不是把宽度缩小就结束了。输入框、导航链接、列表项这些交互元素，在窄屏上如果还沿用桌面端的尺寸，用户就会频繁点错。做响应式时，我越来越觉得“可触达性”比“能否装下”更值得先看。

有些页面在桌面端看得很规整，到了手机上其实问题不在布局，而在行高太挤、文字太小、按钮太密。viewport 只是开始，真正的适配要继续落到信息和交互上。

小结

2013 年做移动端适配，viewport 看起来像一行配置，实际上是在重新定义页面的布局前提。只有先把浏览器怎么看待这张页面弄明白，后面的响应式手段才不会停留在“缩小版网页”的层面。