How to make content display perfectly on different devices when building a website is a problem that every operator needs to consider.AutoCMS knows this, therefore it provides a variety of flexible template display modes to help us choose the most suitable website presentation method according to our actual needs.

The template display modes of AnQi CMS mainly include three types: adaptive, code adaptation, and independent PC+mobile site.Understanding their respective features and applicable scenarios can help you better plan the website user experience and SEO strategy.

一、自适应（Responsive Design）模式

Adaptive mode, as the name implies, can automatically adjust the layout and content on screens of different sizes (from wide-screen computers to tablets and smartphones) with just one set of template code.It's like a chameleon, able to intelligently adjust the display effect of the website according to the size and orientation of the user's device.

The implementation of this pattern mainly relies on technologies such as CSS media queries, flexible layout, and streaming images.When the user visits your website, regardless of the screen size, Anqi CMS will send the same HTML code to it, and then use CSS to control the layout and size of the page elements to adapt to different viewport.

自适应模式最大的优势在于维护起来最省心.You only need to manage a set of template files and a set of content to cover all devices.This not only reduces redundant work, but also greatly reduces maintenance costs.In addition, it is also very friendly to search engines, with mainstream search engines like Google preferring to crawl and index adaptive websites, which is very beneficial for improving the SEO performance of the website.config.json中表现为"template_type": 0)，only need to prepare a set of HTML and CSS template files that are compatible with various screens.

II. Code Adaptation (Dynamic Serving) Mode

The common point between the code adaptation mode and the adaptive mode is that it also only uses one URL.But its core difference lies in that, on the server side, the security CMS dynamically sends different HTML and CSS code based on the type of access device (for example, a computer or a mobile phone).

The system will identify the user's device type (usually User-Agent) to decide which version of the website content to send.This means that, although users access the same URL, mobile users may see a simplified and optimized HTML structure for mobile devices, while PC users see the full desktop version of HTML.

This patternThe greatest advantage is that we can provide the ultimate optimized experience for mobile devices.Since the server can precisely control the content sent, we can only load the content required for mobile devices, remove unnecessary complex scripts and large images, thereby significantly improving the page loading speed and enhancing the mobile user experience.At the same time, since the URL remains unchanged, it also avoids the complexity that may arise from URL switching in SEO.However, the maintenance cost will be slightly higher than the adaptive mode, because you need to manage two sets (or more sets) of HTML/CSS code for different devices."template_type": 1) usually needs to create a file named under the template directorymobileThe subdirectory used to store exclusive templates for mobile devices.

Section 3: PC+Mobile Separate Sites (Separate PC and Mobile Sites) Mode

PC+手机独立站点模式，顾名思义，会为PC端和移动端分别设置独立的域名（比如www.yourdomain.comandm.yourdomain.com），并使用完全独立的模板和内容。

When a user accesses the PC domain through a mobile phone, the AnQi CMS will intelligently redirect them to the mobile domain. This providesthe greatest freedomEnglish site and mobile site can have completely different designs, functions, and content focus, without interfering with each other.For example, the PC site can focus on detailed product displays and document downloads, while the mobile site may be more focused on quick contact and location navigation.

However, this is also the most expensive in terms of management and maintenance among the three modes.You not only need to maintain two completely independent websites, but also pay attention to SEO challenges, such as how to correctly set Canonical tags and Hreflang tags to avoid search engines misjudging them as duplicate content, which can lead to a decline in rankings."template_type": 2) after that, in addition tomobilePlace the mobile template under the directory, and you also need to configure the 'Mobile Endpoint Address' in the 'Global Function Settings' on the backend to specify the domain name of the mobile site.

How to choose the right model for you?

Understood the characteristics of these three modes, the choice becomes clearer:

  • Pursue simplicity, efficiency, and SEO-friendliness:PreferredAdaptive Mode. It is the easiest to maintain and favored by search engines.
  • Hope to optimize the mobile experience to the extreme, but also want to maintain a single URL:ConsiderCode Adaptation Mode. It can provide different content under the same URL, balancing experience and SEO.
  • PC end and mobile end business logic, content display difference is huge, needs to be operated independently:ChoosePC+手机独立站点模式. This allows you to have absolute control over each platform, but the complexity of management is also the highest.

The strength of AnQi CMS lies in the flexible choices it provides for us.No matter the size of your website or who your target users are, you can always find a content presentation strategy that is most suitable for you.

Common Questions (FAQ)

Q1：In the Anqi CMS backend, where should I select or switch the display mode of the template? A1:You can do so in the directory of the current template you are using.config.jsonSet it in the file. Find"template_type"Field, change its value to0Represents adaptive1Represents code adaptation2Represents a PC+mobile independent site. Save the changes and refresh the cache in the background, and the website will display in the new mode.

Q2: Why do some modes need to be created?mobileWhere to store the template? A2： mobileThe folder is for code adaptation and independent site mode for PC and mobile.These two modes both require a separate template or at least a differentiated HTML structure for mobile devices.mobileLook for the corresponding template file in the directory to render the page. If there is none in this mode,mobileThe system may revert to the desktop version template or display abnormally if there is no corresponding template in the catalog or among its contents.

Q3: What will happen if I choose the PC+mobile independent site mode, but only deploy the PC site, and do not set a separate domain and template for the mobile end? A3:If you have enabled the PC+mobile independent site mode but have not filled in the 'Mobile end address' in the background 'Global feature settings', or although it has been filled in but the site corresponding to the address has not been properly configured with a mobile end template, then when a mobile device accesses your PC domain, you may encounter redirect errors, abnormal page display, or even be unable to access.The system cannot find the corresponding mobile content to display, which affects user experience and the normal operation of the website.Therefore, it is necessary to complete the configuration of the mobile site when choosing this mode.