海洋CMS手机版模板怎么设置？WAP和自适应教程

海洋CMS 设置手机版只有两条路：要么用独立的 WAP 模板配手机域名做跳转，要么直接用一套自适应模板靠 CSS 媒体查询适配——新站和老站改版都建议优先选自适应，只有手机端已有独立权重、或需要给手机做极轻量页面时才单独做 WAP。下面把两条路的操作步骤、代码和坑一次讲清。

WAP 模板和自适应模板有什么区别？

结论：WAP 是「两套 HTML + 两个域名」，自适应是「一套 HTML + 一个域名」，二者的维护成本和 SEO 逻辑完全不同。

WAP 模板指的是为手机单独准备一套模板目录，通常绑定 m.example.com 这类二级域名，用户访问 PC 域名时由程序判断 UA 后 302 跳转过去。好处是手机页面可以做到极简，首屏能压到 100KB 以内；代价是改一次版要改两套模板，PC 和移动的 URL 是两套，需要在搜索资源平台单独提交移动适配规则。

自适应模板指同一套 HTML 用 CSS 媒体查询适配不同屏幕，一个 URL 同时服务 PC 和手机。结论：自适应是目前搜索引擎最推荐的做法，因为不存在 URL 对应关系问题，也不用维护跳转逻辑，缺点是 PC 端的重资源（轮播图、侧栏、大图广告）会一起下发到手机端。

海洋CMS 手机版模板在后台怎么设置？

结论：后台的核心动作是把「手机版模板目录」指向你准备好的模板文件夹，并绑定手机域名，具体菜单名称各版本略有差异，找不到时在后台搜「手机」两个字。

操作步骤：

1. 通过 FTP 或宝塔面板进入网站根目录，找到 template 目录，把现有 PC 模板文件夹完整复制一份，重命名为 mobile（不要用中文名，不要带空格）。
2. 进入后台，在「系统」相关设置里找到手机版开关和手机版模板目录两项，把模板目录填成 mobile，保存。
3. 域名解析：给 m.example.com 添加一条 A 记录指向服务器 IP，宝塔站点里把该域名加入绑定，并单独申请 SSL 证书（不要用 PC 域名的证书硬套）。
4. 做好 302 跳转，在入口文件或公共初始化文件里加 UA 判断：

$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
$isMobile = preg_match('/(android|iphone|ipod|windows phone|mobile)/i', $ua);
if ($isMobile && strpos($_SERVER['HTTP_HOST'], 'm.') !== 0) {
    header('Location: https://m.example.com' . $_SERVER['REQUEST_URI'], true, 302);
    exit;
}

1. 在 PC 模板的 <head> 里加移动适配声明，告诉百度手机版地址：

<meta name="mobile-agent" content="format=html5;url=https://m.example.com/当前路径">

1. 到百度搜索资源平台提交移动适配规则，PC 与移动 URL 的对应关系一般是把 www 换成 m、路径保持不变。

自适应模板要改哪几个地方？

结论：自适应只需要改 4 个地方，viewport 是必须的第一个，漏了它手机上就是缩小版的 PC 页面。

1. viewport 标签：在 <head> 加 <meta name="viewport" content="width=device-width,initial-scale=1">，不加的话手机浏览器默认按 980px 宽度渲染，字小到看不清。
2. 媒体查询断点：用 768px（平板竖屏）和 480px（手机）两个断点。断点不要设太多，超过 4 个后期维护会很痛苦。
3. 图片和播放器：全局加 img{max-width:100%;height:auto}；视频播放器容器用百分比宽度加 aspect-ratio:16/9，不要写死 px 宽高。
4. 隐藏而非删除：PC 端的侧栏和轮播用 display:none 隐藏，DOM 还在页面上，体积没减。真要减体积得在模板里做条件判断，手机端不输出这段 HTML。

另外触摸目标（按钮、导航项）的可点区域高度不要小于 44px，这是 iOS 人机界面指南给的数字，低于它手指点不准。

设置完不生效，先查这 5 个地方

结论：手机版设置完没反应，90% 出现在缓存和跳转死循环这两处。

• 模板缓存：海洋CMS 会编译模板，改完模板要去后台执行一次更新缓存，浏览器再用无痕窗口测试，普通刷新可能拿的还是旧文件。
• 文件权限：template 目录权限设为 755、属主设为 Web 运行用户，权限不对模板改动静默失败。
• 跳转死循环：判断条件写成了 strpos(...) !== 0 之外的形式，导致 m.example.com 自己又跳自己，浏览器报「重定向次数过多」。
• CDN 缓存：接了 CDN 的站点，PC 页面被缓存后手机访问拿到的还是 PC 版，需要在 CDN 后台把移动端 UA 加入缓存区分规则。
• 域名没绑定成功：m.example.com 能解析但宝塔站点没绑定，会直接落到默认站点或 404。

总结一下：新站直接做自适应，加好 viewport 和两个断点就够了，省掉跳转和适配提交；确实要做 WAP 的，就按「复制模板目录 → 后台指向 → 绑域名 → UA 跳转 → 加 mobile-agent → 提交移动适配」六步走，最后一定用手机真机加无痕模式验证一遍，别只信 PC 浏览器的模拟器。