没有不值得去解决的问题,也没有不值得去学习的技术!

Troubleshooting Layout Issues When Opening Pages on Mobile in WordPress 6

In WordPress 6, opening a page on a mobile phone results in a broken interface

1. In WordPress 6, opening a page on a mobile phone results in a broken interface. See Figure 1.

In WordPress 6, opening a page on a mobile phone results in a broken interface
Figure 1

2. Scroll to the bottom of the page, and there is an Exit Mobile Version button. See Figure 2.

Scroll to the bottom of the page, and there is an Exit Mobile Version button
Figure 2

3. Click the Exit Mobile Version button, and the page displays normally. See Figure 3.

Click the Exit Mobile Version button, and the page displays normally
Figure 3

4. After trying to disable the plugin: AMP in the backend, the page displays normally. See Figure 4.

After trying to disable the plugin: AMP in the backend, the page displays normally
Figure 4

5. Now I expect the page to display normally by default when opened on a mobile phone. Also, the plugin: AMP cannot be disabled. The current theme: Hueman is incompatible with AMP. See Figure 5.

Now I expect the page to display normally by default when opened on a mobile phone. Also, the plugin: AMP cannot be disabled. The current theme: Hueman is incompatible with AMP
Figure 5

6. The Template Mode was previously: Transitional Mode, and I switched it to the recommended Reader Mode. In Reader Mode, your site will have a non-AMP version and an AMP version, and each version will use its own theme. See Figure 6.

The Template Mode was previously: Transitional Mode, and I switched it to the recommended Reader Mode. In Reader Mode, your site will have a non-AMP version and an AMP version, and each version will use its own theme
Figure 6

7. Select a theme template for mobile visitors, choose: Twenty Fifteen. See Figure 7.

Select a theme template for mobile visitors, choose: Twenty Fifteen
Figure 7

8. Your Reader theme has been automatically installed. In Reader Mode, AMP is served using the reader theme you selected, while pages on the non-AMP site are served using your primary theme. See Figure 8.

Your Reader theme has been automatically installed. In Reader Mode, AMP is served using the reader theme you selected, while pages on the non-AMP site are served using your primary theme
Figure 8

9. Opening the page on a mobile phone, the page displays normally. However, some plugins are not working properly, such as SyntaxHighlighter Evolved. The program code is displayed as plain text, which does not meet expectations. See Figure 9.

Opening the page on a mobile phone, the page displays normally. However, some plugins are not working properly, such as SyntaxHighlighter Evolved. The program code is displayed as plain text, which does not meet expectations
Figure 9

10. Uninstall the plugin: AMP, and install the plugin: Accelerated Mobile Pages. See Figure 10.

Uninstall the plugin: AMP, and install the plugin: Accelerated Mobile Pages
Figure 10

11. Opening the page on a mobile phone, the page displays normally, and the plugin: SyntaxHighlighter Evolved is working properly, meeting expectations. See Figure 11.

Opening the page on a mobile phone, the page displays normally, and the plugin: SyntaxHighlighter Evolved is working properly, meeting expectations
Figure 11

关于作者 · 持续学习与技术实践

我是一名拥有 15 年以上开发经验的技术从业者,自 2013 年起持续运营个人技术博客,记录工作与个人项目中遇到的真实问题,以及解决问题过程中的探索、实践和思考。

除了技术写作,我也在持续开发和维护自己的独立项目,探索新技术和新工具在实际场景中的应用。我始终相信,没有不值得去解决的问题,也没有不值得去学习的技术。

如果这篇文章对你有所帮助,欢迎浏览博客中的其他文章,也欢迎交流技术经验与想法。

关于我  ·  GitHub  ·  邮件联系