海洋 CMS 模板移动端适配很差怎么修改

海洋 CMS 模板移动端适配差，绝大多数情况只差三步就能救回来：在 head.html 补上 viewport 声明、用 768px 媒体查询覆盖桌面端的固定宽度、把图片与播放器改成自适应容器。模板文件都在 /templets/你的模板名/ 目录下，改完清缓存（开了静态生成就重新生成一遍），手机上刷新就能看到变化，不必换整套模板。

海洋 CMS 模板移动端为什么在手机上排版乱？

结论：不是 CMS 的问题，是模板本身按 PC 设计了固定像素宽度，手机浏览器只能缩小整页来显示，于是字变小、按钮点不准、内容横向溢出。

海洋 CMS 的模板由 index.html、list.html、detail.html、foot.html、head.html 等文件拼装，样式多半直接写在 .css 里，容器宽度常见写成 1200px 或 960px 这类固定值。手机屏幕的逻辑宽度只有 360～414px，超出部分就被裁掉或出现横向滚动条。

判断方法很直接：手机打开页面，如果整页被缩放成"小字版"，说明只缺 viewport；如果右侧大片空白、元素挤成一列，说明是固定宽度问题；如果播放器被压扁或超出屏幕，是 iframe 尺寸写死了。

viewport 标签应该怎么写？

结论：在模板的 head.html 里加一行 viewport，这是移动端适配的前提，不加这行，后面所有 CSS 都白写。

推荐写法：

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

width=device-width 让页面宽度等于手机屏幕宽度，initial-scale=1.0 禁止默认缩放，viewport-fit=cover 适配 iPhone 刘海屏。head.html 是海洋 CMS 各页面公共头部，改这一处，首页、列表页、内容页同时生效。改完记得在后台清一次缓存，否则前台读的还是旧模板。

媒体查询怎么覆盖桌面端样式？

结论：不用重写 CSS，在样式表末尾追加一段 max-width:768px 的媒体查询，用 !important 压掉 PC 的固定宽度就能解决八成问题。

@media screen and (max-width: 768px) {
  .container, .wrapper, .main { width: 100% !important; max-width: 100%; padding: 0 10px; box-sizing: border-box; }
  .list li, .item { float: none !important; width: 50% !important; display: inline-block; vertical-align: top; box-sizing: border-box; }
  img { max-width: 100%; height: auto; }
  body { overflow-x: hidden; font-size: 15px; }
}

要点有三个：box-sizing:border-box 防止 padding 撑破容器；overflow-x:hidden 干掉横向滚动条；列表项从 float 改成 inline-block 两列排布，视频站封面图两列是最舒服的比例。断点选 768px 覆盖手机和竖屏平板，需要更细可以再加一个 480px 断点调字号。按钮、导航等可点区域高度不要低于 44px，这是手指能稳定点中的下限。

图片和播放器怎么做到自适应？

结论：图片用 max-width:100%，播放器用 16:9 比例容器，二者都不要再写死像素宽高。

.video-box { position: relative; padding-top: 56.25%; height: 0; }
.video-box iframe, .video-box video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

56.25% 就是 9÷16 的结果，无论屏幕多宽，播放器始终保持 16:9，不会变形。海洋 CMS 播放页常见的问题就是播放器外层写了固定 width/height，把这层容器换成上面的比例写法即可。

改完没效果是什么原因？

结论：九成是缓存或静态页没更新，不是代码写错。

排查顺序：第一，后台清缓存；第二，如果站点开启了静态生成，模板改动后必须重新生成首页、列表页和内容页，否则访问的是旧的 .html；第三，浏览器强刷或用无痕窗口，避免手机浏览器缓存 CSS；第四，确认改的是当前启用模板目录，海洋 CMS 可以切换多套模板，改错目录不会生效。

调试建议用 Chrome 按 Ctrl+Shift+M 打开设备模拟，重点测 360px、375px、414px 三个宽度，这三个值覆盖了绝大多数安卓和 iPhone 机型。

总结一下：补 viewport、加 768px 媒体查询覆盖固定宽度、把图片和播放器改成自适应容器，是海洋 CMS 模板移动端适配的三步核心动作，改的是 /templets/ 目录下的公共头文件和 CSS，改完清缓存、必要时重新生成静态页即可验证。