How to configure website adaptive display on different devices (PC, mobile)?

In the era of the prevalent mobile Internet, whether a website can provide a smooth and beautiful browsing experience on different devices (whether it is a large screen PC or a small mobile phone) has become a key factor in measuring the success of a website.AnQiCMS knows this pain point and provides you with flexible and powerful adaptive display configuration capabilities, allowing your website to easily navigate the multi-screen world.

AnQiCMS divides the adaptive display methods of websites into three main modes, you can choose the most suitable solution according to your business needs and technical preferences.

One, Adaptive Mode: Integrated Responsive Design

This pattern is the mainstream responsive design method at present, it makes your website like a tailor-made clothing, no matter what size of the device the visitor uses, the website can automatically adapt to the screen by intelligently adjusting the layout, image size, and font, etc., and provide a visual effect. **

How to configure:This mode is very simple, mainly designed on the front-end template level. Find the file in your AnQiCMS template folderconfig.jsonfile, and settemplate_typefield to0.This means you will adopt a unified HTML template and mainly rely on CSS3 Media Queries technology to respond to different screen sizes.AnQiCMS renders the template directly in the background, providing the content to the browser, which adapts it based on the device characteristics.

Advantage:

• Low maintenance cost:Only one set of template code needs to be maintained, and content updates are synchronized.
• SEO friendly:All devices share the same URL, avoiding duplicate content issues, which is beneficial for search engine rankings.
• Consistent user experience:The brand image and features are highly consistent across all devices.

Second, code adaptation mode: intelligent switching on the server side

The code adaptation mode lies between pure adaptation and completely independent sites.It is just like preparing different styles of clothing for different occasions, although the styles are different (PC template and mobile template), but they are all stored in the same closet (under the shared main domain URL).When a user visits your website, AnQiCMS will intelligently select and render the dedicated template for PC or mobile end according to the 'identity' of the user's device (User-Agent, that is, the type of access device).

How to configure:First, you need to modify the template you are currently usingconfig.jsonfile, totemplate_typefield to1.

Next, prepare a dedicated template for mobile devices. You need to create a subdirectory namedmobilein the current main template directory. For example, if your main template isdefaultthen the mobile template should be placed in/template/default/mobile/. In thismobiledirectory, you can create corresponding mobile version template files based on the structure of the PC template, such asindex.html(Mobile Home Page),article/detail.html(Mobile Article Detail Page) and so on.

AnQiCMS will automatically load and use the corresponding template when it detects a mobile device visit, while PC device visits will use the template under the main directory.mobiletemplate from the directory, while PC device access will use the template under the main directory.

Advantage:

• Fine control:You can design completely different layouts and interaction logic for PC and mobile, and even hide or display certain features.
• SEO friendly:Even though different templates are used, the same URL is still shared, avoiding SEO complexity caused by different URLs.

Three, PC+mobile independent site mode: independent operation with dual domain

This model is the highest level of customization solution, it is more like having two independent stores, one dedicated to PC users and the other to mobile users, each with its own independent domain and operational strategy. For example, your PC site might bewww.example.comWhile the mobile station ism.example.com.

How to configure:

1. Template configuration:Similarly, in the template you are usingconfig.jsonIn the file, willtemplate_typefield to2. And you need to create it in the main template directory.mobileSubdirectory, and put it into the exclusive template of the mobile site.
2. Back-end settings:Log in to the AnQiCMS backend and go to the "Global Function Settings".You will see an option named 'Mobile End Address'.m.example.com.
3. Server configuration:This step is crucial. You need to ensure that the mobile site's domain (such asm.example.com) Has been parsed to your server IP, and the Nginx or Apache web server and other web servers have configured the corresponding reverse proxy, which will be able tom.example.comThe request is forwarded to the AnQiCMS running port.If you use Baota panel or 1Panel and similar tools for deployment, you can refer to the configuration method of multi-site reverse proxy in their Docker installation tutorial.The "Multi-site Management" feature of AnQiCMS also supports managing multiple domain names under a single system, which is convenient for centralized management.
4. SEO optimization (very critical):To avoid search engines mistakenly identifying it as duplicate content and ensure SEO effects, it is essential to configure the template correctly on both PC and mobile ends.rel="canonical"andhreflang.
   • In the PC station template, userel="alternate"And point to the mobile station URL usingrel="canonical"And point to the PC station URL.