船说 CMS 手机端排版错乱怎么调整

照着这篇做完，你能自己定位船说CMS手机端排版错乱的原因，把首页、栏目页、内容页的串行、错位、字太小、横向滚动条问题修好，不用重装一套模板。

第一步：先确定错乱范围，别急着改代码

这一步要弄清是整站都乱还是个别页面乱，结果决定后面往哪个方向查。用手机浏览器打开出问题的网址，再在电脑 Chrome 里按 F12 打开开发者工具，点左上角那个手机/平板图标（Toggle device toolbar，快捷键 Ctrl+Shift+M），选 iPhone 12 Pro 之类机型刷新对比。会出现三种情况：

• 电脑正常、手机乱：多半是 viewport 或移动端 CSS 的问题（走第二、三、五步）。
• 两边都乱：模板里写死了固定宽度（走第三步）。
• 只有某一篇文章乱：正文里插了超宽表格或大图（走第四步）。

注意：先用无痕窗口再看一次，排除手机浏览器缓存造成的"假故障"。

第二步：检查 viewport 标签有没有写

这一步要确认页面有没有告诉手机"按屏幕宽度渲染"，没有的话手机会默认按 980px 虚拟宽度缩放，字全变小、布局全挤在一起。

打开模板目录（一般是 /template/当前模板名/，或 /app/.../view/，不同版本路径略有差异），找到公共头文件 header.html、head.html 或 common/header.html，在 <head> 里找这一行：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

没有就补上；如果写的是 width=1200 这种固定值，直接改成上面这行。改完保存，后台清一次缓存再刷新手机。

第三步：揪出写死的固定宽度

这一步要找出正文容器的 width 是死值的地方，改成弹性宽度。在 Chrome 开发者工具里选中错位的区块，右边 Styles 面板中带删除线或写着 width: 1200px 的就是嫌疑对象。

在模板的 css/main.css（或 style.css、common.css）末尾追加：

body, .wrapper, .container { max-width: 100%; overflow-x: hidden; }
.container { width: 100%; padding: 0 10px; box-sizing: border-box; }

注意：不要直接把 width: 1200px 删掉，先改成 max-width: 1200px; width: 100%;，否则电脑端会跟着变窄。

第四步：处理图片、表格、代码块溢出

这一步解决"页面能左右拖动"的横向滚动条，元凶通常是一张宽图或一个宽表格。在同一个 CSS 文件里追加：

img, video, iframe { max-width: 100%; height: auto; }
table { display: block; width: 100%; overflow-x: auto; }
pre, code { white-space: pre-wrap; word-break: break-all; }

保存后在手机上看，图片会自动缩到屏幕宽，表格变成可左右滑动的小窗口。

第五步：把多列布局改成单列

这一步让三栏、四栏的排版在窄屏下自动堆成一列。假设模板用的是 Bootstrap 的 col-md-4 这类类名，加一段媒体查询：

@media (max-width: 768px) {
  .col-md-4, .col-sm-6, .col-lg-3 { width: 100%; float: none; }
  .sidebar { margin-top: 15px; }
  body { font-size: 15px; line-height: 1.7; }
}

如果模板用的是自定义类名，先把开发者工具里看到的类名抄下来替换进去。

第六步：清缓存并重新生成静态页

这一步让改动真正生效。进船说CMS 后台，左侧菜单找到「系统」→「缓存管理」（部分版本叫「工具」→「清除缓存」），点「清除全部缓存」。如果站点开了静态生成，再去「内容」→「生成」里重新生成首页和栏目页。

注意：只清了 CMS 缓存还不够——如果套了 CDN，登录 CDN 控制台点「刷新预热」，把 CSS 文件所在的目录或 URL 刷新一遍，否则手机拿到的还是旧样式。

第七步：确认手机端模板是否被调用

如果上面都改完还是乱，检查后台「模板」设置里是不是配了独立的手机模板目录，而你的修改改在了电脑模板上。把改动同步到手机模板文件夹，或干脆关掉手机模板、让手机和电脑共用一套响应式模板。

小结

• 先分范围：整站乱查 CSS 和 viewport，单页乱查正文里的图和表。
• viewport 必须是 width=device-width, initial-scale=1.0。
• 固定 width 一律换成 max-width + width: 100%，别硬删。
• 图片表格用 max-width: 100% 和 overflow-x: auto 兜底。
• 改完记得清 CMS 缓存、重新生成静态页、刷 CDN，三步缺一不可。
• 别忘了确认改的是手机模板还是电脑模板。