viewport 少写一行，手机上排版全乱。这个细节特别小，但后果很明显。
viewport 是什么。就是告诉浏览器，这个页面该按什么宽度来渲染。你写对了，手机上打开是正常的一屏宽度。你没写，手机浏览器会默认按桌面宽度渲染，然后再缩小，结果就是字小得像蚂蚁，用户得两指放大才能看清。
正确的写法很简单，一行 meta 就够。设置宽度等于设备宽度，初始缩放比例是 1。这一行几乎所有现代页面都该有。
还有些常见的坑。第一，用了固定的宽度。比如你给容器设了 1200 像素的固定宽度，手机上就会横向溢出，出现横向滚动条。要做成响应式的，用百分比或者自适应单位。第二，字体太小。手机上正文至少要有足够大的字号，一般来说接近 16 像素是底线。低于这个，用户看着累。第三，按钮太小。手指点不准，体验很差。第四，禁止用户缩放。有些站加了禁止缩放的设置，这个很不好，用户看不清想放大都不行。
那怎么验证。最直接的办法就是用自己的手机打开你的站，看排版正不正常，字能不能看清，要不要横向滚动。然后用几个不同尺寸的设备试一下。还可以用浏览器开发者工具的设备模拟，但真机的效果最准。
我做完这个检查之后发现过一个问题。有个页面的一个元素宽度设成了固定的像素值，在电脑上看着没问题，在手机上就溢出了。这种问题你不实测根本发现不了。
移动端的细节，得在真实的手机上看。电脑上模拟，效果差得远。
—— 来自 图趣网 - 优秀网站分类目录 的分享
