With the popularity of mobile internet, the types of devices used to access websites are increasingly diverse, ranging from desktop computers to tablet computers, and to various sizes of smartphones. Whether website content can be displayed smoothly and beautifully on different devices has become an important criterion for evaluating the quality of a website.AnQiCMS (AnQiCMS) has fully considered this requirement from the beginning of its design, providing flexible and diverse solutions to ensure that the website content can be easily displayed adaptively on multiple devices.

Responsive design philosophy of AnQiCMS

Auto CMS understands the importance of unified and efficient content management and diverse frontend presentation.It supports a variety of frontend adaptation modes through built-in template mechanisms and configuration options, allowing users to choose the most suitable responsive solution according to the characteristics of their own website and operation strategy.Whether it is a unified responsive design pursuing development and maintenance efficiency, or an independent adaptation mode that provides an ultimate experience for specific devices, Anqi CMS can provide solid support.

Choose the appropriate responsive pattern

In the AnQi CMS, there are mainly three display modes for websites, and users can choose and adjust them according to their actual needs in the template configuration. Each of these modes has its own focus, understanding their characteristics can help make more informed decisions:

  1. 自适应模式 (Responsive Design)This is the mainstream responsive design method currently. In Anqi CMS, when you select this mode (in the template'sconfig.jsonconfiguretemplate_type: 0），意味着网站将采用一套代码，通过CSS媒体查询（Media Queries）等技术，检测用户设备的屏幕尺寸和分辨率，然后动态调整布局、图片大小和字体等，以适应不同的显示环境。特点与优势：Maintenance costs are relatively low because all devices share the same set of HTML structures and most CSS styles.Search engine optimization (SEO) performance is good because all content is located under the same URL, making it convenient for search engines to crawl and index.Applicable to websites with relatively uniform content structure and a focus on development efficiency.Consideration factors:The CSS needs to be carefully designed and written to ensure a good experience at all breakpoints.If images, videos, and other media resources are not optimized, it may lead to slower loading speeds on mobile devices.

  2. 代码适配模式 (Adaptive Design)代码适配模式（在config.jsonconfiguretemplate_type: 1）Allows the server to provide different HTML content or CSS styles based on the device type requested by the user (e.g., through User-Agent detection). This means that the website can provide different template files for desktop and mobile ends, such as in/templateThe directory can also create, besides the main templatemobileSubdirectories can store exclusive templates for mobile devices.特点与优势：Compared to full adaptation, this mode can provide more precise control over the content and layout presented for each device type, thereby offering users a more customized experience.The mobile page can load lighter resources to improve loading speed.Consideration factors:Increased the complexity of maintaining the front-end template, which may require writing multiple sets of HTML and CSS for different devices. If not handled properly, it may cause duplicate content issues, affecting SEO, and therefore usually requires coordination with correctcanonicalTags andrel="alternate"Declaration.

  3. PC+Mobile Independent Site Mode (Separate Mobile Site)This mode (inconfig.jsonconfiguretemplate_type: 2）下，网站将拥有两个完全独立的版本，通常是PC端一个域名（如www.example.com），移动端一个独立的子域名（如m.example.com）。English CMS supports binding mobile domain names and provides independent template directories for mobile websites (mobile) and configuration options.特点与优势：Fully independent and optimized experience for PC and mobile users, allowing mobile sites to have unique features and content strategies.Very beneficial for complex application scenarios that require highly differentiated two-end experiences.Consideration factors:The cost of development and maintenance is the highest, requiring management of two independent content and technology stacks. SEO needs to be configured with caution.canonicalTags andhreflang属性，以避免搜索引擎误判为重复内容。此外，需要在系统设置中正确配置“移动端地址”，并确保域名解析无误。

Template level implementation and content optimization

Regardless of the mode chosen, Anqi CMS provides the foundation for implementation through its powerful template engine. All template files are.htmlEnd, and follow the syntax similar to Django template engine. Static resources (such as CSS, JS, images) are stored in/public/static/directory for easy management.

  1. Flexible template structure:You can choose according todesign-director.mdDescribed in the folder organization mode or flat organization mode to build a template. In particular, for code adaptation or standalone site mode,mobile/The catalog is specially reserved for mobile template, and its internal structure is similar to that of the PC template.
  2. Practice of CSS and JavaScript:In English mode, it is crucial to fully utilize CSS media queries to adjust the website layout.For example, by setting style rules for different screen widths, ensure that images, text blocks, and other elements can automatically adjust their size and layout.Using JavaScript, more complex interactions and dynamic content loading can be achieved, further optimizing the mobile experience.
  3. Image optimization is the key:Large images are one of the main factors affecting the loading speed on mobile devices. The Anqi CMS provides a variety of practical functions in the "Content Settings" to solve this problem:
    • WebP image format:Enable WebP format (help-setting-content.md）Can automatically convert uploaded JPG, PNG images to a smaller, higher-quality WebP format, significantly improving loading speed.
    • Automatically Compress Large Images:Enable this feature and set a specified width, the system will automatically compress overly large images, reducing storage space and bandwidth usage.
    • Thumbnail processing:Configure the appropriate thumbnail size and processing method (proportional scaling, padding, or cropping) to ensure that optimized images are loaded in the list page or small display area.
    • Image lazy loading:When usingarchiveDetailTag display document content, you can uselazy="data-src"The parameter adds lazy loading attributes to images. This ensures that images are only loaded when they enter the user's field of view, effectively reducing the initial loading time of the page, especially important for mobile devices.
  4. Rich text content adaptation:Rich text areas such as article details, single-page content, etc. (for example, througharchiveDetail with name="Content"Call), images, tables, and other elements added in the editor should be kept as adaptable as possible. For example, using CSSmax-width: 100%; height: auto;Ensure that the image does not overflow the container. For embedded videos (such as iframe), they should also be made responsive in width via CSS or JS.

Actual operation suggestions

  • Continue testing:During website development and content publication, it is essential to test on a variety of devices (mobile phones, tablets, desktop computers) and browsers, or use browser developer tools to simulate different device views, to ensure that the adaptive display of content meets expectations.
  • Balancing SEO and user experience:Good adaptive design not only enhances user experience, but is also an important factor in search engine rankings.Search engines like Google tend to prioritize the crawling and indexing of mobile-friendly websites, so it is crucial to ensure that the website performs well on mobile devices.
  • Select the appropriate mode:For most small and medium-sized enterprises and self-media,Adaptive ModeorCode Adaptation ModeIt is usually a **choice** between balancing cost and effectiveness. Only under special requirements, would consider building a completely independent PC+Mobile site.

Through these features and flexible configuration options provided by Anqi CMS, you have the ability to create a modern website where content displays perfectly on any device.

Common Questions (FAQ)

  1. I have selected the adaptive mode, why is the mobile phone still displaying incorrectly?This is usually not a problem with the security CMS core function, but rather the front-end CSS style or JavaScript code is not fully adapted to different screen sizes.You need to check the CSS code in the template, especially the media queries, to ensure correct layout and element size adjustments for mobile screens.At the same time, some complex JavaScript plugins may not perform well on mobile devices and need to be debugged for compatibility or replaced.You can use the browser developer tools (such as Chrome's Elements and Responsive Design Mode) to locate specific issues.

  2. Does the Anqi CMS support providing completely different content for mobile devices rather than just different layouts?Yes, Anqi CMS provides this capability through the "PC+Mobile Independent Site Mode" and "Code Adaptation Mode".In the PC+Mobile independent site mode, you can design completely different templates for the PC site and mobile site, and even bind different domains to achieve complete separation of content and functionality.