船说 CMS 移动端适配好不好

学完这篇，你能按一套固定流程判断自己的船说 CMS 移动端到底适不适合手机访问，并知道该进哪个后台菜单、改哪几行代码、重点测哪些页面。

第一步：确认版本和移动端模式

这一步要搞清楚你的船说 CMS 是响应式、独立手机站，还是根本没开移动端；做完后你会知道手机访问走的是哪套模板。

登录后台，看页面顶部或右下角版本号，常见为船说 CMS V1.2.x、V1.3.x。进入「系统」→「系统设置」→「移动端设置」（部分版本叫「手机设置」）。看「移动端访问模式」：响应式、独立域名、关闭。若选独立域名，填 m.你的域名.com，保存。

注意：如果这里选“关闭”，手机访问会直接显示 PC 模板，这不是适配差，是根本没启用移动端。

第二步：用真机和 Chrome 开发者工具测 5 类页面

这一步要拿到具体问题清单：横向滚动、字体太小、按钮点不到、图片撑破、表单错位；做完后你知道哪个页面不合格。

电脑 Chrome 打开站点，按 F12，点左上角手机图标，或按 Ctrl+Shift+M，设备选 iPhone 12 Pro，分辨率 390×844。依次打开首页、栏目页、文章详情、搜索页、留言/表单页。在 Console 输入：

document.documentElement.scrollWidth
window.innerWidth

前者大于后者就是横向溢出。

注意：只把浏览器窗口拖窄不算移动端测试，必须用设备模拟或真机。

第三步：检查 viewport 和移动模板 CSS

这一步要让手机按设备宽度渲染，图片和表格不撑破屏幕；做完后大部分排版问题会消失。

后台进入「模板」→「移动模板」→ 找到当前模板的 header 文件，确认有：

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

在移动模板 CSS 末尾加：

img{max-width:100%;height:auto;display:block}
body{font-size:16px;line-height:1.6}
table{display:block;overflow-x:auto}
@media (max-width:768px){.pc-only{display:none!important}}

保存后进「系统」→「缓存管理」→「清除缓存」。

注意：如果模板里写死 width:1200px，只加 max-width 不一定生效，要搜 1200 改成 100%。

第四步：配置手机域名和伪静态

这一步要保证手机域名访问不 404，详情页能正常打开；做完后独立手机站可用。

若用独立手机站：DNS 添加 m 的 A 或 CNAME 记录到服务器；Nginx 里加 server_name m.example.com;，根目录指向手机站目录；伪静态选船说 CMS 规则。Apache 则确认 .htaccess 存在且规则正确。

注意：改完先清浏览器缓存和后台缓存，否则看到的还是旧页面。

第五步：跑分和压缩资源

这一步要知道移动端速度是否合格；做完后能得到明确优化项。

用 PageSpeed Insights 测移动端，看 Performance 分数。目标：首页 3 秒内可交互。图片压成 WebP，开启 Gzip/Brotli、CDN、缓存。

第六步：判断“好不好”的标准

这一步用来下结论；做完后你不会只凭感觉说好坏。

如果默认模板有 viewport、宽度自适应、菜单可点、详情不溢出，就算合格；如果写死 1200px、无手机菜单、弹窗遮挡，就是不合格。船说 CMS 本身能开移动端或独立手机模板，但最终好不好主要看模板和配置，不是 CMS 名字决定。

小结

• 先看后台「移动端设置」是否开启。
• 用 Chrome 390×844 测首页、栏目、详情、搜索、表单。
• 重点查 viewport、img max-width、写死宽度。
• 独立手机域名要配 DNS、伪静态、清缓存。
• 适配好不好 = 模板 + 配置 + 图片资源，别只怪 CMS。