手机上打开官网排版错乱？自适应没做对的五种表现，附十分钟自查清单

客户发来一张截图，问官网是不是坏了：手机上打开是一条窄缝，字小到要双指放大才读得下去。我把地址在电脑上打开，四栏排得整整齐齐，间距也对，看不出任何异常。

同一个页面，两种结果。服务器没动过，浏览器版本也不旧，问题出在移动端这一层的配置上。

先分清楚是哪一种错乱，三种毛病改法完全不同

把「手机上排版乱」拆开看，实际是三件事，动手的位置不一样。

• 整页缩成一条窄缝，字小得看不清，双指放大才能读。头部没声明 viewport，浏览器按 980px 排完再整体缩小。
• 大体正常，只有一块往右顶出屏幕，横着能拖出一条白边。顶出来的多半是固定宽度的图片、嵌入框，或者一张宽表。
• 字看得清、位置也对，就是手指按不准。点击区小于 44px，一行挤太多项，按下去会点到隔壁。

前两类最常见，自己就能改。第三类要动样式表，麻烦一些，也更容易改出新的问题。

为什么偏偏在手机上才出问题？因为电脑屏幕的可用宽度常在 1300px 以上，设计师按这个宽度画的四栏，在 375px 的屏幕上本来就塞不下。很多模板的断点设在 768px，800 到 1200 这一段反而没人管，用平板打开时最容易露馅。

还有一种要单独拎出来：浏览器里正常，从微信里点开就变样。那是内置浏览器渲染和字体的问题，跟自适应不是一回事，微信里打开官网和浏览器不一样那篇单独拆过，这里只谈适配本身。

viewport 那一行漏了，整页会被按 980px 渲染再缩小

手机浏览器的默认行为是：页面没声明 viewport，就按 980px 的虚拟宽度排版，再缩到屏幕宽度。iPhone 的逻辑宽度常见是 375px，980 缩到 375，字号相当于打了个二五折，14px 的字落到屏幕上只剩 5px 出头。

正确的那一行不长，放在 head 里就够：

自查很快。电脑上打开 Chrome，按 菜单 → 更多工具 → 开发者工具 → Ctrl+Shift+M 切到设备模拟，选 iPhone 12（390×844）。页面要是出现横向滚动条，或者内容明显缩小居中，先去看头部那几行。

从别处整段复制的 HTML，最容易丢的就是头部。我们当时把一段活动页代码贴进自定义模块，样式全对，手机上就是一条缝，找了两小时才发现 viewport 那行被编辑器过滤掉了。

某一块往右撑出屏幕，源头通常是写死的宽度

常见的三个来源：产品图按 800px 宽上传、第三方嵌入框写死 600px、从 Excel 直接粘过来的宽表。

在电脑上把浏览器窗口由宽拖到窄，盯着看哪一块先顶出去，那一块就是源头。方法笨，但比逐行看代码快得多。

我们当时遇到的是一张参数图。图片本身已经加了 max-width: 100%，照样溢出，查到最后发现外层是一个写死 600px 的嵌入框，图片再怎么自适应也被框住。最后改的是框，不是图。

顺序上先看容器，再看子元素，别一上来就动全局样式。

宽表单独说一句。十几列的产品参数表在手机上没法压缩，硬压会把字挤成竖条。可行的做法只有两个：把表格拆成每行一条的列表，或者给表格套一个可以横向滑动的容器，让它在自己的框里滑，不带动整页。第二种省事，但访客得知道能滑，加一句提示文字会好很多。

字号低于 16px，iOS 会自己放大

iOS Safari 有个规则：输入框的 font-size 小于 16px 时，手指一点进去，页面自动放大到能看清，退出后不一定缩回原位。访客的感受是「点一下就乱了」，而且他不知道该怪谁。

点击区也要量。44px 是手机端比较通行的下限，一行塞进四个导航项，每项往往只剩 60px 宽、30px 高，手指按下去经常差一个。

改这两处不用碰结构，调数字就行。字号统一到 16px，按钮高度给到 44px，行高留一点余量，看起来会松，点起来准。

还有两个手机独占的坑。一个是软键盘：输入框在页面下半部时，键盘弹起来会把它盖住，光标跟着躲到键盘后面，访客以为点错了。另一个是固定在底部的咨询条，iOS 地址栏收起时高度会跳，容易盖住最后一屏的文字。这两个问题在电脑上永远复现不了，只能拿真机试。

后台能改到哪一层，哪些必须动代码

H5 自助建站这一档，移动端能调的是模块层面：拖模块、改宽度和间距、调上下顺序，手机端可以单独预览。多数错乱到这一步就解决了，参考H5 自助建站的模块与移动端设置清单。

后台还开放了 MCP 服务，能对接 WorkBuddy、Codex 这类 AI Agent，用自然语言批量改页面文案和结构。改五十个页面的手机端间距，不用一个个点进去拖。这个能力只在这三类产品上有：H5 自助建站、外贸独立站、H5 营销官网。

模块参数给不到的地方，就是它的局限。多列网格在不同屏宽下要重新排列，靠拉宽度做不出来，得在自定义 HTML 模块里写 CSS，或者换模板。前者要求有人会写代码，后者要额外花钱，两种都算不上省事。

预算更紧的会看云-速成美站。这一档是成品模板，sitemap 能自动生成，自动推送和 MCP 它都不带。选之前先想清楚后面要不要频繁改版式，改不动的时候比较被动。

我们是谁、做过哪些站，写在公司介绍页里，这里不占篇幅。

十分钟自查清单

• 头部有没有 viewport 那一行，content 里是不是 width=device-width。
• 把窗口拖窄，看有没有横向滚动条；有的话定位到具体那一块。
• 图片、嵌入框、表格，逐个确认宽度是百分比还是固定 px。
• 输入框字号是否达到 16px，按钮高度是否达到 44px。
• 在真机上滑一遍，别只看模拟器：触摸、软键盘、地址栏收起都会影响高度。
• 手机端有没有被单独隐藏或替换的模块，换过图片的记得补 alt。

清单跑完还是不正，基本可以断定在模板或样式表层，找服务商比自己硬改划算。

补一句关于改完之后的验证。站点改完不是立刻生效，缓存和 CDN 都要等一会儿，我一般等两三分钟再到手机上刷新一次。还有一次是改完没反应，查出来是某个模块被单独设过手机端样式，优先级盖住了上层规则，找了一下午。

什么时候该换一套后台

如果每次改版都要为手机端单独返工一遍，说明这套系统的移动端能力跟不上了。判断标准很直接：改一个模块的手机显示，要不要找人写代码。

要写代码的不一定不能留，但得算清楚一年会为它花多少次。改一次三百五百，一年改八次，账就不一样了。

想先看看后台长什么样，H5 自助建站可以先在线试用，觉得合适再买，试用环境里能直接改模块试手机端效果。

如果页面更偏成品、不需要频繁动版式，云-速成美站这一档也够用，看看用过的人怎么评价再决定，那一页上还有评分和成交记录可查。

手机上那点错乱，八成不是什么玄学。先分清是哪一类，再判断该自己调还是换工具，比反复截图问人要快。