How does the adaptive template, code adaptation, and PC + mobile mode affect the display of content on different devices?

The AnQiCMS content management system provides strong flexibility in content presentation, especially for display effects on different devices.It supports three template modes of 'adaptive', 'code adaptation', and 'PC+mobile independent site', allowing us to finely control the display of content on computers, tablets, and mobile phones according to specific needs.Understanding the working principle of these patterns is crucial for ensuring user experience and optimizing website performance.

First, let's understandAdaptive mode. In adaptive mode, the website uses a set of templates and styles, through CSS media queries (Media Queries) and other technologies, to automatically adjust the webpage layout according to the screen size of the user's device.This means that no matter whether the user is using a wide-screen monitor, laptop, or phone, they access the same URL and see the same set of content structure.AnQiCMS supports template development in this way, making it possible for us to respond to all devices with a single code.The advantages of this pattern are self-evident: the maintenance cost is low because only one piece of code needs to be managed;Friendly to search engines because it has only one URL, avoiding potential duplicate content issues.However, the challenge lies in the fact that some complex elements or large images on the desktop may still be loaded on mobile devices, even though they are eventually hidden or resized, which may affect the loading speed and performance of mobile devices.When designing, it is particularly important to optimize resources to ensure a smooth experience on any device.

Next isCode Adaptation Mode. Code adaptation mode is more intelligent. In this mode, AnQiCMS will identify the type of the user's device (for example, through User-Agent), and then provide different template files based on the type of device.This means that, although the user is still accessing the same URL, the server will decide and send a template specially designed for mobile users to mobile users and a template designed for PC users to PC users.In AnQiCMS, this is usually done by creating in the template directorymobile/To implement subdirectories. When the system detects a mobile device, it will load it first.mobile/The template files under the directory are used to render the page. The advantage of this mode is that it can provide a highly optimized user experience for different devices.Mobile users do not load irrelevant JS and CSS for the desktop version, the content layout can also be completely reorganized for the characteristics of mobile phones, thereby bringing faster loading speed and better visual effects.But relatively, the maintenance cost will increase because we need to prepare two (or more) different template structures for the same content.In AnQiCMS template configuration fileconfig.jsonIn, you can set it up."template_type": 1To enable code adaptation mode.

Finally isPC + mobile phone independent site modeThis is the most thorough separation scheme, which provides a completely independent website for PC and mobile terminals, usually distinguished by different domain names or subdomain names (for examplewww.example.comandm.example.com）。AnQiCMS multi-site management feature supports this model well, we can set up a primary site as the PC site, and then create a sub-site as the mobile site through the multi-site feature, and set the access address of the mobile site to an independent mobile domain.In this mode, each site can have its own independent template, content, and even database (although AnQiCMS multi-site management can share core content).This pattern provides the greatest freedom, allowing us to present completely different content strategies and user experiences on different devices.For example, a mobile site can be specifically designed as a lightweight application, providing only core functions and streamlined content.But at the same time, its development and maintenance costs are also the highest, requiring management of two or more independent websites.Moreover, pay special attention to SEO and ensure it is properly configuredcanonicalTags andhreflangLabel, and set up 301 redirect to avoid search engines from treating it as duplicate content. In the AnQiCMS system settings, we can configure 'mobile end address' in conjunction with the template configuration fileconfig.jsonof"template_type": 2Enable this mode.

In summary, the core of these three modes lies in how they affect the display of content on different devices: the adaptive mode achieves flexible layout through style adjustments;The code adaptation mode is to provide different templates under the same URL according to the device to achieve deeper optimization;And the PC + mobile independent site mode, it directly separates the PC and mobile sites, providing ultimate customization control.AnQiCMS through its flexible template engine and backend configuration, provides us with the ability to choose the best multi-device content display solution for our own website.

Frequently Asked Questions (FAQ)

1. Question: I have selected the adaptive mode, but the image loading on the mobile phone is still slow, what should I do? Answer:In adaptive mode, although the layout adapts to the screen, the original image may still be optimized for desktop size, causing slow loading on mobile devices. You can try the following optimizations:

   • Image Compression:In the AnQiCMS content settings background, enable 'whether to automatically compress large images' and 'whether to start Webp image format', which can effectively reduce the size of image files.
   • Responsive images:Using the templatesrcsetproperty or<picture>Tags, load images of different sizes according to the device screen size.
   • Lazy Loading (Lazy Load):Images are only loaded when they enter the user's viewport, which can be done in the AnQiCMS template.lazy="data-src"Implement in this way, for details, please refer to the Content field of the "Document Details Tag".

2. Question: In code adaptation mode, do I need to rewrite all the content for the mobile version? Answer:In most cases, you do not need to rewrite the content for the mobile version. AnQiCMS's code adaptation mode is mainly through switchingTemplateTo change the way content is presented. This means that the core content data of articles, products, and so on is shared, and you only need tomobile/Create a set of mobile-specific templates with a different structure from the desktop template but calling the same content.This can ensure consistency of content and provide optimized display for mobile devices.If you want to simplify or differentiate the content on the mobile端, you can also display or hide certain content blocks on the template level.

3. What are the main differences between the PC+mobile independent mode and the code adaptation mode? Answer:The main differences between the two lie in the implementation methods and resource independence:

   • Domain and site:PC+mobile phone independent mode uses a completely independent domain name (such aswww.example.comandm.example.com), it is usually set to two independent sites in AnQiCMS.And the code adaptation mode is to switch to different template files under the same domain through device detection by AnQiCMS.
   • Resources and content:In independent mode, the PC site and mobile site can have completely independent code, images, styles, and even some content (although AnQiCMS also supports shared content).Code adaptation mode is to adapt devices by different front-end templates on the basis of unchanged core content and most of the back-end logic.
   • Complexity and control:The independent mode offers the highest level of customization and control, but also comes with maintenance costs and SEO configuration (such ascanonicalandhreflangThe complexity is the highest. The code adaptation pattern simplifies maintenance and SEO work while maintaining a certain degree of control.