如何为启用window-controls-overlay的PWA标题栏按钮添加边框？

当启用window-controls-overlay模式时，系统按钮所在的标题栏区域会被从页面正常流中剥离，导致页面头部的边框在该区域位置被截断。要给系统按钮底部补全边框，可以通过以下步骤实现：

核心思路 #

利用navigator.windowControlsOverlay API获取系统按钮区域的位置和尺寸，动态创建一个与头部边框样式一致的元素，精准定位到系统按钮区域的底部，补全截断的边框。

实现步骤 #

1. 动态获取系统按钮区域信息并创建边框元素 #

通过API监听overlay的可见性和几何变化，实时调整边框元素的位置和尺寸：

if ('windowControlsOverlay' in navigator) {
  const overlay = navigator.windowControlsOverlay;
  
  const updateOverlayBorder = () => {
    if (!overlay.visible) return;
    
    const rect = overlay.getBoundingClientRect();
    let borderEl = document.getElementById('overlay-border');
    
    if (!borderEl) {
      borderEl = document.createElement('div');
      borderEl.id = 'overlay-border';
      document.body.appendChild(borderEl);
    }
    
    Object.assign(borderEl.style, {
      position: 'fixed',
      top: `${rect.bottom}px`,
      left: `${rect.left}px`,
      width: `${rect.width}px`,
      height: '1px', // 与头部边框高度保持一致
      backgroundColor: '#e0e0e0', // 与头部边框颜色保持一致
      zIndex: 999,
      pointerEvents: 'none' // 不干扰系统按钮的交互
    });
  };

  // 初始化执行
  updateOverlayBorder();
  // 监听窗口大小变化
  window.addEventListener('resize', updateOverlayBorder);
  // 监听overlay区域几何变化
  overlay.addEventListener('geometrychange', updateOverlayBorder);
}

2. 匹配头部边框样式 #

确保自定义边框的样式和页面头部边框完全一致，示例头部CSS如下：

/* 页面头部的边框样式 */
.app-header {
  border-bottom: 1px solid #e0e0e0;
  /* 其他头部样式... */
}

/* 自定义边框的补充样式，可根据需求调整 */
#overlay-border {
  /* 高DPI屏幕下可调整为0.5px优化显示 */
  /* height: 0.5px; */
}

注意事项 #

• 必须设置pointerEvents: 'none'，防止自定义边框元素遮挡系统按钮的点击操作
• 监听geometrychange事件是关键，当窗口大小调整、系统设置变更导致系统按钮区域位置/尺寸变化时，能自动更新边框位置
• 高DPI屏幕下，可根据实际情况调整边框高度（如0.5px），保证边框显示清晰

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