如何在Docusaurus v2站点中适配移动端安全区域？

要实现横屏模式下页眉、页脚全屏延伸，避免iPhone等设备出现白边，可按以下步骤操作：

1. 替换默认的viewport元标签 #

Docusaurus会自动生成默认的viewport标签，直接在themeConfig.metadata中添加会导致重复标签，推荐通过自定义HTML模板来替换：

• 在项目src目录下创建html.js文件（若已存在则直接编辑）
• 保留Docusaurus模板的原有变量结构，找到原viewport元标签，修改为：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  

2. CSS适配安全区域 #

添加CSS样式，让页眉、页脚的背景覆盖安全区域，同时保证内容避开摄像头、菜单栏等系统控件区域：

• 打开项目自定义CSS文件（如src/css/custom.css），添加以下样式：

  /* 适配页眉安全区域 */
  .navbar {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    width: 100%;
    box-sizing: border-box;
  }
  
  /* 适配页脚安全区域 */
  .footer {
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    width: 100%;
    box-sizing: border-box;
  }
  

  若需要让页眉/页脚背景完全覆盖圆角、刘海等区域，可额外补充：

  .navbar, .footer {
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    background-color: #你的背景色; /* 替换为实际使用的背景色 */
  }
  

替代方案：用脚本移除重复标签 #

如果不想自定义HTML模板，也可以通过配置前端脚本替换viewport标签：

• 在docusaurus.config.js中添加：

  module.exports = {
    // 其他配置项...
    injectHtmlTags: {
      headTags: [
        {
          tagName: 'script',
          innerHTML: `
            window.addEventListener('DOMContentLoaded', () => {
              const oldViewport = document.querySelector('meta[name="viewport"]');
              if (oldViewport) oldViewport.remove();
              const newViewport = document.createElement('meta');
              newViewport.name = 'viewport';
              newViewport.content = 'width=device-width, initial-scale=1.0, viewport-fit=cover';
              document.head.appendChild(newViewport);
            });
          `,
        },
      ],
    },
  };
  

  这种方式无需修改HTML模板，但依赖前端脚本执行，不如自定义模板直接可靠。

内容的提问来源于stack exchange，提问作者Frode F.