如何配置网站在不同设备上（PC、手机）的自适应显示？

在当今移动互联网盛行的时代，网站能否在不同设备上（无论是大屏幕PC，还是小巧的手机）都能提供流畅、美观的浏览体验，已成为衡量一个网站成功与否的关键因素。AnQiCMS深知这一痛点，为您提供了灵活且强大的自适应显示配置能力，让您的网站轻松驾驭多屏世界。

AnQiCMS将网站的自适应显示方式划分为三种主要模式，您可以根据自己的业务需求和技术偏好，选择最适合的方案。

一、自适应模式：一体化响应式设计

这种模式是目前主流的响应式设计方法，它让您的网站就像一件量身定制的衣服，无论访问者使用何种尺寸的设备，网站都能通过智能调整布局、图片大小和字体等，自动适应屏幕，提供**的视觉效果。

如何配置： 采用这种模式非常简单，主要是在前端模板层面进行设计。在您的AnQiCMS模板文件夹中，找到config.json文件，并将template_type字段设置为0。这意味着您将采用一套统一的HTML模板，并主要依靠CSS3的媒体查询（Media Queries）技术来响应不同屏幕尺寸。AnQiCMS在后台渲染页面时，会直接将这套模板内容提供给浏览器，由浏览器根据设备特性进行适配。

优点：

• 维护成本低： 只需要维护一套模板代码，内容更新也同步进行。
• SEO友好： 所有设备共享同一URL，避免了重复内容问题，有利于搜索引擎排名。
• 用户体验一致： 品牌形象和功能在所有设备上保持高度一致。

二、代码适配模式：服务器端智能切换

代码适配模式介于纯粹的自适应和完全独立的站点之间。它就好比为不同场合准备了不同款式的服装，虽然款式不同（PC模板和手机模板），但都存放在同一个衣橱里（共享主域名下的URL）。当用户访问您的网站时，AnQiCMS会根据用户设备的“身份”（User-Agent，即访问设备类型），智能地选择并渲染PC端或手机端的专属模板。

如何配置： 首先，您需要修改当前使用模板的config.json文件，将template_type字段设置为1。

接下来，为手机设备准备专属模板。您需要在当前主模板目录下创建一个名为mobile的子目录。例如，如果您的主模板是default，那么手机模板就放在/template/default/mobile/。在这个mobile目录中，您可以根据PC模板的结构，创建对应的手机版模板文件，比如index.html（手机首页）、article/detail.html（手机文章详情页）等。

AnQiCMS会在识别到移动设备访问时，自动从mobile目录中加载并使用相应的模板，而PC设备访问时则使用主目录下的模板。

优点：

• 更精细的控制： 您可以为PC和手机端设计完全不同的布局和交互逻辑，甚至可以隐藏或展示某些功能。
• SEO友好： 尽管使用了不同的模板，但依然共享相同的URL，避免了因URL不同带来的SEO复杂性。

三、PC+手机独立站点模式：双域名独立运营

这种模式是最高级的定制化方案，它更像是拥有两家独立的门店，一家专门面向PC用户，另一家则专为手机用户服务，各自拥有独立的域名和运营策略。例如，您的PC站可能是www.example.com，而手机站则是m.example.com。

如何配置：

1. 模板配置： 同样地，在您模板的config.json文件中，将template_type字段设置为2。并且，您需要在主模板目录下创建mobile子目录，并放入手机站的专属模板。
2. 后台设置： 登录AnQiCMS后台，进入“全局功能设置”。您会看到一个名为“移动端地址”的选项。在这里填入您为手机站准备的独立域名，例如m.example.com。
3. 服务器配置： 这一步至关重要。您需要确保手机站的域名（如m.example.com）已经解析到您的服务器IP，并且Nginx或Apache等Web服务器已经配置了相应的反向代理，将对m.example.com的请求转发给AnQiCMS的运行端口。如果您使用宝塔面板或1Panel等工具部署，可以参考其Docker安装教程中关于多站点反向代理的配置方法。AnQiCMS的“多站点管理”功能也支持在一套系统下管理多个域名，方便您进行集中管理。
4. SEO优化（非常关键）： 为了避免搜索引擎误判为重复内容，确保SEO效果，请务必在PC端和移动端的模板中正确配置rel="canonical"和hreflang标签。
   • 在PC站模板中，使用rel="alternate"指向手机站URL，并用rel="canonical"指向PC站URL。