如何在Docusaurus 2中禁用移动端适配，仅适配PC端？

Docusaurus 2没有内置的“禁用移动端适配”开关，但可以通过配置调整和自定义CSS完全实现仅保留PC端布局的需求，具体步骤如下：

• 强制导航栏保持桌面端样式
  在docusaurus.config.js的themeConfig中，关闭导航栏的折叠行为，避免触发移动端汉堡菜单逻辑：

  module.exports = {
    themeConfig: {
      navbar: {
        collapseOnScroll: false,
        hideOnScroll: false,
      },
    },
  };
  

• 自定义CSS覆盖移动端媒体查询
  在src/css/custom.css中添加以下样式，强制页面保持最小宽度、覆盖Docusaurus默认的移动端布局规则：

  /* 强制页面最小宽度，溢出时显示横向滚动条 */
  html {
    overflow-x: auto;
    min-width: 1440px;
  }
  
  /* 覆盖996px以下的移动端导航栏样式 */
  @media (max-width: 996px) {
    /* 强制显示右侧导航项，隐藏汉堡按钮 */
    .navbar__items--right {
      display: flex !important;
    }
    .navbar__toggle {
      display: none !important;
    }
  
    /* 保持内容容器的PC端宽度 */
    .container {
      width: auto !important;
      min-width: 1440px;
      padding: 0 2rem;
    }
  
    /* 强制侧边栏保持PC端显示状态（若使用侧边栏） */
    .sidebar {
      display: block !important;
      position: relative !important;
    }
  }
  

• 禁用页面缩放行为
  在docusaurus.config.js的headTags中添加自定义视口元标签，禁止浏览器缩放页面：

  module.exports = {
    headTags: [
      {
        tagName: 'meta',
        attributes: {
          name: 'viewport',
          content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no',
        },
      },
    ],
  };
  

以上配置会让页面在任何屏幕宽度下都保持1440px的最小宽度，导航栏和布局始终维持PC端样式，同时禁止浏览器的缩放行为。如果使用的是非默认主题，需要根据主题的CSS类名调整上述样式中的选择器。

内容的提问来源于stack exchange，提问作者Jeongil Kang