```html

移动网站

去年秋天我在杭州东站等车，旁边一位大叔举着手机来回晃，移动网站嘴里嘟囔“这破网页怎么点不动”。移动网站我凑过去看了一眼——页面宽度明显是移动网站按桌面端设计的，按钮小得像米粒，移动网站手指按上去十次有八次误触旁边的移动网站广告。他把浏览器字体调到最大，移动网站结果整个布局直接崩了，移动网站侧边栏把正文挤成一条缝。移动网站

这不是移动网站个例。我后来特意做了个粗糙的移动网站测试：随机打开国内一百个企业官网，用手机访问，移动网站超过六成在首屏就出现横向滚动条，移动网站三成需要双指放大才能看清正文。移动网站有些站点底部弹窗关不掉，移动网站有些表单输入框会触发键盘遮挡，提交按钮死活按不到。

手指触控面积大约是指尖的1.5倍，这意味着可点击区域至少要44×44像素——这个数字来自苹果的人机界面指南，安卓那边也差不多。很多开发者知道这个规范，但实际做的时候还是习惯性地把按钮设成30像素高，因为在桌面浏览器里看着“挺合适”。

另一个常被忽略的是视口设置。缺少下面这行代码，手机浏览器会默认按980像素宽度渲染页面，然后整体缩小，文字变成蚂蚁大小：

就这么一行，解决大半显示问题。但很多老站点压根没加，或者加了却把 user-scalable=no 也塞进去——禁用了缩放。这挺要命的。有人视力不好，想放大看清楚，你偏不让。这跟把门锁上还不给钥匙有什么区别。

导航也是重灾区。桌面端的顶部横向菜单在手机上根本塞不下，于是有些站点选择折叠成汉堡图标，这没问题。问题出在点击汉堡后弹出的菜单——要么是全屏遮罩但关闭按钮藏在角落，要么是侧滑菜单滑出来一半卡住。我见过最离谱的一个，菜单展开后把整个页面推到了屏幕外，只能刷新重来。

表单输入更让人头疼。手机键盘弹起来会占掉将近一半屏幕高度，如果输入框在页面下半部分，键盘一弹就把它盖得严严实实。用户看不见自己输的内容，只能盲打。解决方式其实不复杂，监听 focus 事件后把输入框滚动到可视区域，或者直接用 scrollIntoView。但很多开发者没想过这个场景。

图片加载速度是另一个隐形杀手。我拿自己手机测过，4G网络下打开一个没做懒加载的移动页面，首屏加载时间平均4.2秒。其中图片占了总流量七成以上。有些站点直接引用桌面端的大图，一张轮播图就2MB，手机用户流量哗哗地跑，页面还卡成幻灯片。用 srcset 和 sizes 属性按屏幕密度给不同尺寸的图，这技术出来快十年了，普及率依然感人。

还有点击延迟。早期移动浏览器为了判断用户是单击还是双击缩放，会在 click 事件上强制加300毫秒延迟。现在大多数现代浏览器已经通过 touch-action: manipulation 或 width=device-width 消除了这个延迟，但仍有不少站点用着老旧的 fastclick 库，或者干脆没处理，按钮按下去要等半秒才响应。用户感觉就是“这网站好卡”，其实不是网络问题，是事件处理问题。

我说这些不是要否定移动网站的价值。恰恰相反，移动端流量早就超过桌面端了，把移动体验做好是基本要求，不是加分项。但现实是很多团队把移动适配当成“顺便做一下”的事情，排期靠后，测试草率，上线后也不看真实用户数据。

有个做电商的朋友告诉我，他们改版时把移动端结算按钮从底部固定栏移到页面流里，转化率直接掉了18%。后来改回去，又恢复了。就这么一个位置调整，真金白银的差距。

移动网站没什么高深理论。核心就一句话：把自己当成一个用手机、在晃动的公交车上、可能只有一根手指空闲的人。按这个前提去设计、去写代码、去测试，大部分问题自然就没了。