PC/PC手机版共存 (传统方法)
这是织梦CMS最经典、最稳定的手机站建设方法，它通过一个独立的手机模板,让网站在用户通过手机访问时自动切换到手机版界面。
核心原理
- 域名判断：通过PHP脚本检测用户的访问设备（PC或手机）。
- 自动跳转：如果检测到是手机访问，自动跳转到手机版的域名（
m.yourdomain.com）。 - 独立模板：手机版使用一套完全独立的模板和数据,与PC版数据可以同步也可以不同步。
详细步骤
第一步：准备工作
- 域名：你需要一个二级域名来专门用于手机站，
m.yourdomain.com,将这个域名解析到你的服务器IP地址上。 - 空间：确保你的服务器支持绑定子域名。
- 数据库：手机站可以复用PC站的数据库，也可以新建一个独立的数据库。强烈建议复用,这样数据同步更方便。
第二步：上传并安装手机端程序
- 下载程序：从织梦CMS官网下载最新版的完整安装包，在压缩包里，你会找到一个名为
mobile的文件夹,里面就是手机端的程序文件。 - 上传文件：通过FTP工具，将
mobile文件夹里的所有文件，上传到你网站根目录下的一个新文件夹，/m/。 - 安装：在浏览器中访问
http://www.yourdomain.com/install/（手机端程序里的安装路径），根据向导完成手机站的安装。注意：- 在安装过程中，数据库信息（主机名、用户名、密码、数据库名）最好和你的PC站保持一致,这样数据才能同步。
- 网站安装目录可以填写
/m/。
第三步：修改PC站根目录下的 index.php 文件
这是实现自动跳转的关键一步。
- 用代码编辑器打开你网站根目录下的
index.php文件。 - 找到文件开头的
<?php这一行,在其下方添加以下PHP代码：
require_once (dirname(__FILE__) . "/include/common.inc.php");
require_once DEDEINC."/arc.partview.class.php";
$pv = new PartView();
$pv->SetTemplet($cfg_basedir . $cfg_templets_dir . "/index.htm");
$pv->Display();
// ------------------------------
// 手机自动跳转代码
if($mobiletpl==''){
$mobiletpl = 'm'; // 默认手机模板目录，如果手机模板在 /m/ 目录下，就写 'm'
}
$mobilebrowser = array(
'iphone', 'android', 'phone', 'mobile', 'wap', 'netfront', 'java', 'opera mobi', 'opera mini', 'ucweb', 'windows ce', 'symbian', 'series60', 'blackberry', 'palm', 'nokia', 'sonyericsson', 'mot', 'samsung', 'htc_', 'smartphone', 'midp'
);
$useragent = strtolower($_SERVER['HTTP_USER_AGENT']);
if(dstrpos($useragent, $mobilebrowser) || dstrpos($useragent, $mobiletpl)){
$mobileurl = 'http://m.yourdomain.com/'; // 这里替换成你的手机站域名
header("Location: $mobileurl");
}
// ------------------------------
代码解释：
$mobiletpl = 'm';：如果你的手机端程序在/m/目录下,就保持这样。$mobilebrowser = array(...)：这是一个手机浏览器特征码列表,织梦已经内置得很全了。$mobileurl = 'http://m.yourdomain.com/';：这是最重要的一步！ 请务必将http://m.yourdomain.com/替换成你自己的手机站域名。
第四步：创建手机模板
- 在PC站模板目录
/templets/下，新建一个文件夹，/mobile/。 - 在
/mobile/文件夹里，创建你的手机版首页模板文件，index.htm。 - 你可以仿照PC版的首页，设计一个更简洁、适合手机屏幕的布局，通常使用更少的图片、更大的字体和更清晰的导航。
- 在织梦后台 -> 模板 -> 默认模板管理，将手机首页设置为
/mobile/index.htm。
第五步：数据同步（可选但推荐）
如果手机站和PC站使用同一个数据库，那么内容是同步的，但如果你想手机端只显示部分内容（比如只显示文章，不显示产品），或者需要不同的调用方式,你可以在手机模板里使用不同的织梦标签来调用数据。
在手机首页模板 index.htm 中,你可以这样调用文章列表：
{dede:arclist titlelen='40' row='10'}
<a href="[field:arcurl/]">[field:title/]</a>
{/dede:arclist}
通过调整 arclist 标签的参数（如 typeid 指定栏目ID）,可以实现手机端只显示特定栏目的内容。
响应式模板 (现代方法)
这是目前更流行、更推荐的方法，它不需要独立的手机域名和程序，而是通过CSS媒体查询，让一套模板在不同尺寸的设备（PC、平板、手机）上自动调整布局和样式。
核心原理
使用CSS3的 @media 查询，为不同的屏幕宽度设置不同的CSS样式，当浏览器窗口宽度改变时，页面会自动应用对应的样式,从而实现自适应。
详细步骤
第一步：准备一个响应式模板
- 购买或下载：最简单的方法是去模板网站购买或下载一个已经做好的响应式织梦模板，很多模板市场都提供这种模板,它们已经内置了响应式代码。
- 自行修改：如果你有HTML和CSS基础，也可以修改你现有的PC模板,使其变为响应式。
第二步：修改模板文件（以首页为例）
- 打开你的首页模板文件
index.htm。 - 在
<head>标签内，添加以下viewport元标签,这是移动端适配的基石：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
- 在CSS样式表的开头或结尾，添加媒体查询代码，假设你的主要内容在一个
#main的div里,你可以这样写：
/* 默认样式（PC端） */
#main {
width: 1200px;
margin: 0 auto;
float: left;
}
/* 当屏幕宽度小于等于768px时（平板和手机） */
@media screen and (max-width: 768px) {
#main {
width: 100%; /* 宽度变为全屏 */
float: none; /* 取消浮动 */
padding: 10px; /* 增加内边距，让内容不贴边 */
}
/* 你还可以在这里调整其他元素，比如字体大小、图片大小等 */
.logo img {
max-width: 100%; /* 图片最大宽度为容器宽度，防止溢出 */
height: auto;
}
}
/* 当屏幕宽度小于等于480px时（小屏手机） */
@media screen and (max-width: 480px) {
#main {
padding: 5px;
}
}
第三步：处理图片
为了防止大图在小屏幕上溢出,给所有图片添加一个通用的CSS样式：
img {
max-width: 100%;
height: auto;
}
第四步：测试
在浏览器中打开你的网站，然后手动调整浏览器窗口的宽度，观察页面布局是否随之变化，也可以使用浏览器的开发者工具,模拟不同的设备进行测试。
两种方法对比与选择建议
| 特性 | PC/PC手机版共存 | 响应式模板 |
|---|---|---|
| 实现原理 | 域名跳转，独立模板 | CSS媒体查询，一套模板 |
| 域名需求 | 需要一个手机子域名 (如 m.) |
不需要，一个域名即可 |
| 维护成本 | 较高，需要维护两套模板和代码 | 较低，只需维护一套模板 |
| 加载速度 | 手机端代码更精简，加载快 | 代码量较大，但可通过优化提升速度 |
| SEO | 非常友好，可以分别为PC和手机站设置独立的TDK（标题、描述、关键词），对搜索引擎更友好。 | 友好，通过 rel="canonical" 标签可以规范主版本，但不如独立站灵活。 |
| 开发难度 | 对新手友好，按步骤操作即可 | 需要一定的HTML/CSS基础和耐心调试。 |
| 用户体验 | 针对性设计，体验极佳 | 体验流畅，但需要精心设计才能在各种屏幕上都好看。 |
如何选择？
-
如果你是新手，追求稳定和SEO效果： 强烈推荐方法一（PC/PC手机版共存），这是织梦官方支持最久、最稳定的方案，SEO优势明显，操作步骤清晰,不容易出错。
-
如果你是开发者，追求简洁、低成本和长期维护性： 推荐方法二（响应式模板），这是未来的趋势，一套模板搞定所有设备，维护成本低，虽然初期开发或修改模板需要一些技术功底,但长期来看更划算。
对于绝大多数用户来说，从方法一开始是最稳妥的选择，当你对织梦更熟悉后,再考虑将网站升级为响应式模板。
