"你这个网站在手机上全是乱的"——这句话大概是建站过程中最常收到的反馈。而它的原因，往往跟审美无关，是几行基础设置没做对。
先确认那条最重要的设置
页面头部必须声明视口，否则手机会按桌面宽度渲染，然后再整体缩小，看起来就是字特别小、要放大才能点。
<meta name="viewport" content="width=device-width, initial-scale=1">这一行是所有移动端适配的前提，没有它，后面写多少媒体查询都白搭。老模板或手工改过的页面尤其要检查这项。
固定宽度是错位的元凶
容器写了固定像素宽度，比如 1200px，屏幕只有 390px 时内容就溢出，横向出现滚动条。正确做法是用百分比、可伸缩的栅格，让布局跟着容器走。
图片要加一条最大宽度限制，不然一张大图就能把整个页面撑破。图片撑破布局是移动端最常见的视觉故障，处理成本却最低。
断点不用为每台手机单独写
常见的做法是设两三个关键断点，覆盖手机、平板、桌面三档就行。像素级地追每一款机型，维护成本高得离谱，而且三年后新机型出来又得重来。
更省心的思路是先做窄屏再往上加，从最受限的场景开始设计，内容优先级会更清楚。反过来先做宽屏再往窄挤，最后往往是删了又删。
几处特别容易出问题的地方
- 表格：手机上不要硬压，包一层可横向滚动的容器更实用。
- 按钮：点击区域至少留到 44 像素见方，手指点不准的按钮会被反复误触。
- 文字：正文小于 14px 在手机上非常难读，行高也要跟着放宽。
- 弹窗：遮罩层写死高度，键盘一弹出就把按钮顶出可视区，注册和支付流程最容易死在这。
真机测试要看这几种环境
桌面浏览器缩小窗口不能替代真机，触摸滚动、字体自动放大、输入框聚焦这些行为在模拟器里都不准。
至少测两个环境：iOS 的 Safari，以及安卓微信内置浏览器。尤其是微信内置浏览器，它是私域和分享场景的主要入口，出问题的概率也最高。
测试时重点看四件事：首屏有没有横向滚动条、导航能不能点开、表单能不能顺利填完并提交、图片有没有变形。先把"能用"保证住，再谈好不好看——手机上用户对精致的容忍度远低于对卡顿的容忍度。