LECMS怎么做手机移动端适配

学完这篇，你能把 LECMS 站点在手机上从"挤成一团"改成能正常阅读、能点、能滑，并且知道该动哪几个文件、改错了怎么退回去。

第一步：先搞清楚你的模板结构，再决定改哪条路

这一步的目的，是确认你要走"响应式改一套模板"还是"PC 和手机各一套模板"，选错了后面全白干。

用宝塔面板的文件管理器，或者 FTP 工具连上服务器，进网站根目录，看这几个位置：

• template/ 目录：里面每个文件夹就是一个模板皮肤，双击进去看有没有 mobile、m、wap 这类命名的目录；
• 根目录下有没有单独的 m/ 文件夹（有些 LECMS 版本把手机站独立放在这里）；
• 后台左侧菜单「系统」→「系统信息」或「关于我们」，记下版本号。

如果有独立的手机模板目录，走第二步 B 方案；如果只有一套 PC 模板，走 A 方案（响应式改造）。

注意：改之前先把 template/ 整个目录打包下载一份备份，改崩了直接覆盖回来，比逐行回滚快得多。

第二步：加 viewport，这是移动端适配的地基

这一步做完，页面在手机上至少不会默认按 980px 缩放显示。

打开 template/你的模板名/ 下的公共头部文件，常见文件名是 header.html、head.html、common/header.html，在 <head> 标签里第一行插入：

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

如果原来已经有 viewport，且写着 width=1200 或 user-scalable=no，直接整行替换掉。

注意：有些 LECMS 模板的头部是拆成 header_pc.html 和 header_m.html 两个文件的，两边都要加，别只改一个。

第三步：用媒体查询把 PC 布局"压"成竖排

这一步的目标是让内容区在 768px 以下自动变成单列。

找到主样式文件，通常在 public/static/模板名/css/style.css，或者 template/你的模板名/style/ 里面。在文件最末尾追加（不要从头改，方便日后删）：

@media (max-width: 768px) {
  .container, .wrap, .main { width: 100% !important; padding: 0 12px; }
  .sidebar, .right-col, .ad-fixed { display: none; }
  .list li, .goods-item { width: 100% !important; float: none; }
  img { max-width: 100%; height: auto; }
  table { display: block; overflow-x: auto; }
  body { font-size: 15px; line-height: 1.7; }
}

类名不要照抄，先按 F12 在浏览器里看你的模板实际用的是什么类名，再替换。

注意：LECMS 内容页常把正文宽度写死在标签 style 属性里，这种内联样式 CSS 优先级更高，得用 !important 或者去模板文件里删掉那个 width。

第四步：把导航改成可折叠的汉堡菜单

这一步做完，手机顶部才有能点开的菜单，而不是被挤成两行的导航条。

在头部模板的导航 <nav> 前面加一个按钮：

<input type="checkbox" id="navToggle" hidden>
<label for="navToggle" class="nav-btn">☰</label>

配合 CSS：

.nav-btn { display: none; }
@media (max-width: 768px) {
  .nav-btn { display: block; font-size: 22px; padding: 8px; cursor: pointer; }
  #navToggle:not(:checked) ~ nav { display: none; }
}

nav 是你的菜单容器的实际标签或类名，记得对齐。

第五步（B 方案）：配独立手机站域名或 UA 跳转

如果你走的是 PC / 手机两套模板，这一步做的是让用户自动跳到手机版。

进后台，路径通常是「系统」→「站点设置」→「移动端设置」（不同版本可能叫「手机版设置」「WAP 设置」），把手机域名填成 m.你的域名.com，并在域名解析里加一条 A 记录指向同一台服务器。

后台没有这个功能的话，在根目录 index.php 最顶部加：

<?php
if (strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false
    && strpos($_SERVER['HTTP_HOST'], 'm.') === false) {
    header('Location: https://m.你的域名.com' . $_SERVER['REQUEST_URI']);
    exit;
}

注意：跳转前务必确认手机模板已经能正常打开，否则 PC 用户会被跳到一个 404 页面。另外跳转要保留 REQUEST_URI，不然栏目页、详情页全部会跳到首页。

第六步：清缓存，真机验证

这一步确认改动真的生效了。

后台「系统」→「缓存管理」→「清除缓存」，然后浏览器按 Ctrl+Shift+R 强制刷新。F12 打开开发者工具，点左上角设备图标，选 iPhone 或 Android 尺寸逐页检查。最后拿真手机连同一网络再看一遍。

注意：如果站上挂了 CDN，记得在 CDN 后台刷新缓存，否则你本地改好了，手机上还是旧样式。

小结

• 先判断模板是"一套响应式"还是"两套独立"，这决定了后面所有动作。
• <meta name="viewport"> 是地基，不加它后面所有 CSS 都白写。
• 媒体查询写在样式文件末尾，方便回滚，不污染原样式。
• 内联 width 和固定宽度容器是最常被忽略的两个坑。
• 手机独立站跳转必须保留 REQUEST_URI，并确认手机模板可用后再开启。
• 改完一定清 LECMS 缓存 + CDN 缓存，再用真机验证。