移动端适配的三个实际问题与三十秒自查法

## 一、移动端不是缩小版桌面 很多站的移动端体验差，原因很统一：直接把电脑版缩下去。字变小、按钮变小、横竖滚动。 用户不是用放大镜看网页的，用拇指点不到就会走。 ## 二、三个实际问题 **问题一：点击区太小。** 导航项、分页、关闭按钮，至少要 44 像素高。很多站只有十几像素，拇指根本点不到。 **问题二：字体不调。** 正文低于 16 像素，读起来就累。很多站为了“显得内容多”把字调到 12 像素。 **问题三：横向溢出。** 图片、表格、代码块超出屏幕，整个页面能左右拖。这是最常见的移动端事故。 ## 三、怎么快速自查 打开开发者工具，把视口设成 375×667，然后看三件事： 1. 有没有横向滚动条。 2. 标题会不会断成两行还挤。 3. 表格能不能读（能不能横向滑动）。 三十秒就能判断一个页面能不能用。 ## 四、代码块怎么办 技术站的移动端难题就是代码。 我的做法是：代码块内允许横向滚动，外面不允许；字号比正文小一号但行高加大。 这样不破坏页面布局，又能读完。 ## 五、图片的三种处理 小图：直接适应宽度。 大图：加点击看大图。 图表：给一个可以左右的容器，别硬缩。 ## 六、用组件库省事 如果不想从零调响应式，用现成组件是最快的。 [Bootstrap 组件实验室](https://bootstrap.wanxiangsucai.com) 里的组件都是可交互的，把浏览器窗口拉窄就能看到断点行为：导航栏怎么折叠、卡片怎么堆叠、轮播怎么适应。用 5.3 的组件，大多数移动端问题不用自己写。 ## 七、一件容易被忽略的事 移动端的性能通常比桌面差很多。同样一个页面，手机上的加载时间可能是电脑的三倍。 所以首屏优化在移动端优先级更高。 ## 八、一句总结 移动端适配的核心不是“变小”，是“重新排”。 排版不变，只改尺寸，一定不好用。