一、先弄明白：手机是怎么“看”你的网页的
电脑屏幕宽、手机屏幕窄，但浏览器为了兼容早期为电脑设计的网页，默认会假装自己有一个大约 980 像素宽的“虚拟窗口”，先把整个页面按这个宽度排好版，再整体缩小塞进手机屏幕。这个虚拟窗口就叫视口（viewport）。所以很多老页面在手机上打开会整页变小、字小得像蚂蚁，根本原因就是它没有告诉浏览器：请按手机的真实宽度来排版。
二、移动端最常见的五类问题
- 整页缩小、要双指放大才看得清：页面没有声明视口，浏览器按默认宽度渲染。
- 文字过小、行距过密：字号用了固定数值，在窄屏上没有跟着调整。
- 出现横向滚动条：某个元素超出了屏幕宽度，常见的罪魁是大图、宽表格和写死宽度的容器。
- 按钮点不准：可点区域太小或挨得太近，手指一按就点到旁边去了。
- 内容被“吃掉”：顶部被浏览器地址栏遮挡，或者底部按钮被手机的手势条盖住。
三、自查方法：三步走
- 用浏览器模拟。在电脑上打开你的页面，按 F12 打开开发者工具，切换到设备模拟（响应式）模式，依次选 375、390、414 这几个常见宽度，观察页面是否变形。
- 查横向溢出。在模拟模式下把页面横向拖到底，如果出现滚动条，就说明有元素超宽。判断标准很简单：页面内容和屏幕宽度应该是齐平的，多出来的那一截，就是问题源头。
- 真机验证。模拟终究是模拟，用自己的手机分别用不同浏览器打开一次，重点看按钮好不好点、文字在户外光线下是否看得清。
四、几个改起来快、收益明显的设置
第一，加上视口声明。在页面头部声明“宽度等于设备宽度、初始缩放为 1”，这是移动适配的地基，缺了它，后面所有调整都事倍功半。
第二，让图片和表格自适应。给图片设一个上限：最大宽度不超过它所在的容器宽度，高度自动等比缩放；宽表格不要硬塞进窄屏，允许它自己单独横向滚动。
第三，用相对单位代替固定像素。字号、间距尽量用相对单位（比如 rem，即以根元素字号为基准的倍数），屏幕变窄时整体比例才不会乱。
第四，保证可点面积。手指不像鼠标那么精准，重要按钮的可点区域建议不小于 44×44 像素，正文文字不小于 14 像素，一般 16 像素左右读起来最舒服。
五、上线前的检查清单
- 页面没有横向滚动条。
- 第一屏不需要放大就能看清主要内容和按钮。
- 点开输入框、键盘弹出时，不会遮住正在输入的位置。
- 图片没有变形、没有被拉伸。
- 主要按钮单手可点，并且不会误触相邻元素。
- 在弱网环境下打开，也能看到基本结构和文字。
移动适配没有一劳永逸的配置，它更像是一种习惯：每次改完页面，顺手在模拟器和真机上各看一眼，大多数问题都会在用户发现之前，先被你发现。