SoeayCMS 默认模板采用响应式设计，同一套模板即可自动适配手机、平板、电脑等设备。如需完全独立的手机版界面，可通过自定义模板主题或扩展开发实现。

响应式设计

默认模板采用 CSS3 媒体查询（Media Query）实现自适应布局，一套代码多端运行：

/* 手机 */
@media (max-width: 768px) {
    .container { width: 100%; }
    .sidebar { display: none; }
}

/* 平板 */
@media (min-width: 769px) and (max-width: 1024px) {
    .container { width: 96%; }
}

/* 电脑 */
@media (min-width: 1025px) {
    .container { width: 1200px; }
}

移动端优化建议

• 使用相对单位（rem、%、vh），避免固定像素导致错位。
• 触控友好的按钮大小建议 ≥ 44px。
• 图片使用 srcset 或响应式图片方案，减少移动端流量。
• 避免横向滚动，确保内容区不溢出屏幕。
• 在公共头部必须加入 viewport 标签：

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

独立手机版实现方式

当前系统默认使用 template/default/ 模板。如需独立的手机版模板，可通过以下方式实现：

1. 响应式一套模板（推荐）：在 default 模板中写充分媒体查询，所有设备共用一套代码，维护成本低。
2. 创建 template/mobile/ 目录：自行复制 default 模板到 mobile 目录，通过后台站点配置或扩展插件根据 User-Agent 切换模板主题。
3. 扩展插件：开发独立手机版插件，在请求入口根据 User-Agent 设置模板路径。

注意：当前核心版本默认不自动识别 User-Agent 切换模板，若需该功能，请通过上述第 2、3 种方式自行实现。

模板检测移动端的常用方法

在模板或控制器中，可通过 User-Agent 字符串判断常见移动端设备：

$ua = $_SERVER['HTTP_USER_AGENT'] ?? '';
$isMobile = preg_match('/Mobile|Android|iPhone|iPad|iPod/i', $ua);

如非必要，建议优先使用响应式布局方案，避免维护两套模板带来的重复工作。