3.3 响应式适配与移动端 touch 目录

> 手机版和 PC 版是两套模板，改一套不会带着另一套走。

X5.0 是两套模板，不是一套加个 media query

Discuz! 的手机版不是靠 CSS 响应式把 PC 版缩小。每个套系下都有一个独立的 touch/ 目录，里面是另一整套模板文件：

template/你的标识/
├── common/
│   ├── header.php
│   └── footer.php
├── forum/
│   ├── forumdisplay.php
│   └── viewthread.php
└── touch/
    ├── common/
    │   ├── header.php
    │   └── footer.php
    ├── forum/
    │   ├── forumdisplay.php
    │   └── viewthread.php
    └── ...

系统会判断当前访问来源（UA 判断加后台的站点设置），命中手机版就走 touch 目录，找不到对应文件时回退到 PC 版模板。这意味着你改 PC 模板，手机版不会变，反过来也一样——这是新手最常见的困惑，调试半天发现自己在改错的那一份。

好处也很实在：手机版的布局密度、导航方式、交互控件都可以做得更简单，不必被 PC 版的结构绑住。

PC 与手机版模板对应关系

同名对应是主线索，touch 里的文件名和 PC 版保持一致，个别页面会额外拆出简化版：

对不上的情况是有的：有些 PC 页面在 touch 下没有同名文件，直接复用 PC 版；也有 touch 下单独存在、PC 版没有的文件（少见）。所以别假设"一对一"，改之前先 ls 一下 touch 目录。

手机版 DIY：X5 的新能力

X3 时代手机版是不能做 DIY（页面自由布局）的，X5.0 补上了这块。做法和 PC 版完全一致，在 touch 目录下的模板里加 DIY 区域：

<!--[diy=diy1]--><div id="diy1" class="area"></div><!--[/diy]-->

区域名称（这里 diy1）是 DIY 数据的键名，PC 版和手机版用不同的键名时后台要分别建两套配置。想让两端共用一套内容，就在两个目录下用同名键名，然后在后台给同一条 DIY 记录的移动端展示方式做配置。

后台 → 门户 → DIY 页面里可以分别设置每个区域在 PC 端和移动端的模块列表，这是 X5 才有的独立配置项。

响应式做法：两种路线的取舍

既然内核是双模板，CSS 层面的响应式还要不要做？取决于你的套系形态：

如果你打算走第二条路，就得注意一个前提：touch 目录下必须能缺省。很多默认套系里 touch 是完整存在的，直接删掉会让系统回退逻辑失效，稳妥做法是保留目录但让模板极简化，或者确认你选的模板套系本来就不带 touch。

媒体查询断点可以这样起步：

/* 移动优先：先按手机写，再用 min-width 往上加 */
.dt-card { width: 100%; padding: 10px; }

@media screen and (min-width: 768px) {
    .dt-card { width: 640px; padding: 16px 20px; }
}

@media screen and (min-width: 1024px) {
    .dt-card { width: 720px; }
}

移动优先的好处是写出来的 CSS 在小屏上必然干净——大屏只是在小屏基础上放宽，不会出现"先写宽屏再回头修一堆溢出"的局面。Discuz! 后台很多老样式是桌面优先写的，你新写的部分用移动优先，混合起来也读得懂。

touch 目录的 touch 适配要点

手机端不只是"缩小"，几件事必须单独做：

touchend 相关的点击延迟在移动端浏览器上是真实存在的，底部导航这种高频点击区域值得单独处理。

五个必踩的坑

1. 只改了 PC 模板，手机版没变。 先确认 touch 目录下没有同名文件；没有同名文件时它复用的是 PC 版模板，那改动应该生效——如果没生效，问题多半出在手机版 CSS 覆盖了 PC 样式。
2. touch 目录文件名写错。 文件名必须和 PC 版一致，写成 viewthread.htm 而系统找的是别的后缀，就静默回退了。X5 的 default 套系默认启用 .php 后缀模板，你的套系里 .htm 和 .php 混着放时尤其容易漏。
3. 改了忘了更新缓存。 touch 目录同样走编译缓存，改完必须去后台更新缓存。
4. DIY 区域在手机端空白。 键名和 PC 版混用了，或者后台没勾选该区域的移动端模块列表。
5. PC 端样式泄漏到手机端。 extend_common.css 里的规则对两端都生效，宽度写死的地方（width:1200px）会把手机版撑出横向滚动。修的顺序是先修 extend_common.css 里写死的宽度，再去看 touch 里的局部覆盖。

验证方法很简单：把浏览器窗口拉窄到手机宽度看 PC 版有没有横向滚动条，再直接用手机访问同一个 URL 看 touch 版效果。两条路都走一遍，能省掉后面很多猜测。