How can websites provide a smooth and consistent user experience on different screen sizes in today's Internet environment with multiple devices coexisting, which is a core challenge for operators.AnQiCMS (AnQiCMS) is well-versed in this field, providing users with flexible and diverse website display mode configurations. Whether your needs are simple and efficient or fine-tuned customization, you can find a suitable solution.

The Anqi CMS currently supports three mainstream website display modes: adaptive mode, code adaptation mode, and PC+Mobile independent site mode.Each pattern has its unique working principle and applicable scenarios, understanding them helps you make the most suitable choice for your website operation strategy.

Understand the three website display modes of AnQi CMS

1. Responsive DesignAdaptive mode, also known as responsive design, is currently the most common and recommended display method.Its core idea is to 'design once and run everywhere'.You only need to maintain a set of code (HTML, CSS, JavaScript), the system will automatically adjust the layout, image size, and font elements of the website according to the screen size and resolution of the user's device, ensuring that the content is presented elegantly on all devices (whether PC, tablet, or smartphone).

  • Working Principle：主要通过CSS media queries (Media Queries)来实现。Load different style rules based on browser width and other characteristics, thereby changing the layout and style of page elements.
  • Advantages: Low maintenance costs, just one content management system is needed, which is conducive to search engine optimization (SEO), as all devices access the same URL, avoiding duplicate content issues.
  • Applicable scenarios: Websites with limited budget, relatively unified content structure, and the need to simplify maintenance work, such as blogs, corporate exhibition websites, and so on.

2. Code Adaptive Mode (Code Adaptive)The code adaptation mode provides deeper customization capabilities based on adaptability.It means that your website can identify the type of user device on the server side (such as PC or mobile), and then distribute or render different page templates or content structures based on different device types, but usually still stays under the same domain name.

  • Working Principle: When AQCMS receives a user request, it judges the device type based on information in the HTTP request header, such as User-Agent. If it detects a mobile device, it will prioritize searching for template files specifically designed for mobile terminals (usually stored inmobileSubdirectory), if not found, fallback to the PC template.
  • Advantages：Compared to pure CSS adaptation, code adaptation can provide a more concise and dedicated experience that conforms to mobile user operating habits for mobile devices.For example, you can remove unnecessary JS scripts, ads, or complex image elements on mobile devices to improve loading speed and performance.
  • Applicable scenarios: Websites have higher requirements for mobile experience, needing to provide differentiated features or content for mobile devices, but do not want to completely separate the two sites.

3. PC+Mobile Independent Sites (PC+Mobile Independent Sites)The PC+Mobile independent site mode refers to the construction of completely independent websites for PC and mobile terminals, each with its own domain name (such aswww.example.comandm.example.com)、independent templates, and even possibly independent content and functions. When users access the PC domain via mobile devices, the system will automatically redirect them to the mobile domain.

  • Working Principle/template/mobileUnder the directory, separate from the PC template.
  • Advantages
  • Disadvantage: The highest development and maintenance costs, requiring management of two or more sets of website content and templates. In terms of SEO, it needs to pass through.rel="alternate"andrel="canonical"Tags to inform search engines of the relationship between two sites to avoid duplicate content and weight dispersion issues.
  • Applicable scenariosWebsites that have high customization requirements for user experience on different terminals and have sufficient development and operation resources, such as large enterprises, e-commerce platforms, and media portals.

How to configure the website display mode in Anqi CMS

Configuring the website display mode in Anqi CMS is very intuitive. The core configuration lies in the template you choose and its internal structure.config.jsonFiles, as well as the system settings on the back end.

  1. Select the template type:When you select or upload a template in the 'Template Design' -> 'Website Template Management' section of the Anqi CMS backend, you will find that each template has aconfig.jsonConfiguration file. In this file, there is a key field calledtemplate_type.

    • "template_type": 0: It indicates that the template supportsAdaptive mode.
    • "template_type": 1: It indicates that the template supportsCode Adaptation Mode.
    • "template_type": 2: It indicates that the template supportsPC + Mobile independent site mode.

    You just need to select the correspondingtemplate_typeThe template can enable the corresponding display mode. Anqi CMS will decide how to handle page requests and render templates based on this configuration.

  2. Prepare the mobile template file:ForCode Adaptation ModeandPC + Mobile independent site modeYou need to prepare a set of independent template files for the mobile end.

    • Under your template directory (for example/template/your_template_name), create a subdirectory namedmobile.
    • Place all page templates designed for mobile devices (such as the homepageindex.html, article detail pagearchive/detail.html, list pagearchive/list.htmland so on) in thismobiledirectory, and ensure that the internal structure is consistent with the PC template structure.
    • For example, if your PC homepage is/template/your_template_name/index.htmlthen the mobile homepage should be/template/your_template_name/mobile/index.html. Anqi CMS will automatically select the template from the corresponding path under the device type.

  3. Configure a separate mobile domain (only for PC+Mobile independent site mode):If you choose the PC+Mobile independent site mode, then in the Anqi CMS background "Background Settings" -> "Global Settings", you will see a setting item named "Mobile End Address".

    • Here, you need to enter the independent domain name bound to your mobile website (for examplem.yourdomain.com)
    • Make sure that this domain name has been correctly resolved and pointed to your server, and that the reverse proxy service on the server-side, such as Nginx or Apache, has also been properly configured to forward requests from this domain name to the Anqi CMS.Only in this way, when a mobile device accesses the PC domain, the system can redirect the user to the correct mobile independent site.

Choose the mode that suits you best: Practical suggestions

When choosing the website display mode, there is no absolute “**” solution, only the one that is most suitable for your current needs.

  • Prioritize adaptive mode.If you are a startup, a personal blog, or have limited resources, adaptive mode is your ideal starting point. It balances user experience and maintenance costs, and is SEO-friendly.
  • When fine control is needed, choose code adaptationIf the adaptive mode cannot meet your specific performance or user experience needs on the mobile end, but you do not want to bear the maintenance cost of dual sites, code adaptation mode is a good compromise solution.
  • Large-scale and highly customized needs, choose PC + Mobile independent siteIf your business scale is large, there are essential differences in positioning, functions, and user experience between PC and mobile platforms, and you have sufficient development and operation resources, then the independent site model will give you the greatest degree of freedom and terminal performance. But please pay attention to the standard configuration of SEO to ensure that search engines can correctly understand the relationship between the two sites.