锁定屏幕为横屏时状态栏区域出现灰色背景问题

针对你用Angular+Capacitor+屏幕方向插件播放YouTube视频横屏后，设备左侧原状态栏区域留灰的问题，可尝试以下几种解决方案：

1. 调整Capacitor WebView全局配置 #

修改capacitor.config.ts，让WebView内容完全填充屏幕，消除状态栏占位的影响：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: '你的应用ID',
  appName: '你的应用名',
  webDir: 'dist/你的应用打包目录',
  android: {
    webView: {
      // 允许WebView延伸到刘海/状态栏区域
      layoutInDisplayCutoutMode: 'shortEdges'
    }
  },
  ios: {
    // 清除内容内边距，避免留空
    contentInset: {
      top: 0,
      bottom: 0
    }
  }
};

export default config;

2. 动态控制页面根容器样式 #

在切换横屏/竖屏时，强制页面根元素全屏，移除多余的边距和占位：

// 组件内的状态切换逻辑
togglePlayerOrientation() {
  if (this.playerIsPlaying) {
    window.screen.orientation.lock('landscape');
    StatusBar.hide();
    
    // 设置页面全屏样式
    document.body.style.cssText = `
      padding: 0;
      margin: 0;
      height: 100vh;
      width: 100vw;
      overflow: hidden;
    `;
    // 针对Angular根组件也做全屏处理
    const rootApp = document.querySelector('app-root');
    if (rootApp) {
      rootApp.style.height = '100vh';
      rootApp.style.width = '100vw';
      rootApp.style.overflow = 'hidden';
    }
  } else {
    window.screen.orientation.lock('portrait');
    StatusBar.show();
    
    // 恢复页面原有样式
    document.body.style.cssText = '';
    const rootApp = document.querySelector('app-root');
    if (rootApp) {
      rootApp.style.height = '';
      rootApp.style.width = '';
      rootApp.style.overflow = '';
    }
  }
}

3. 优化状态栏插件调用逻辑 #

隐藏状态栏前先将其背景设为透明，避免残留背景色：

if (this.playerIsPlaying) {
  window.screen.orientation.lock('landscape');
  // 先设透明背景再隐藏
  StatusBar.setBackgroundColor({ color: '#00000000' });
  StatusBar.hide();
} else {
  window.screen.orientation.lock('portrait');
  StatusBar.show();
  // 恢复原有状态栏背景色
  StatusBar.setBackgroundColor({ color: '#你的默认状态栏颜色' });
}

4. 确保YouTube播放器容器全屏 #

给YouTube播放器的父容器添加全屏样式，避免容器尺寸不足导致的留白：

.youtube-player-wrapper {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

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