如何在Angular应用中锁定窗口屏幕显示比例为16:9

核心原理 #

利用CSS百分比计算规则结合媒体查询实现比例锁定，横竖屏切换时自动补黑边，和DVD播放的适配逻辑完全一致，不会拉伸原有内容。

实现步骤 #

1. 新增固定比例容器样式 #

在全局样式文件styles.css或者对应组件的样式文件中加入以下代码：

/* 16:9固定比例外层容器 */
.fixed-16-9-container {
  position: relative;
  width: 100vw;
  height: 0;
  padding-top: 56.25%; /* 9 ÷ 16 = 0.5625，基于宽度计算高度 */
  overflow: hidden;
  background: #000; /* 超出显示区域的部分补黑边 */
}

/* 内容层，所有业务内容放在这个容器内 */
.fixed-16-9-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 横竖屏适配：当屏幕比例小于16:9时，按高度适配，左右补黑边 */
@media (aspect-ratio < 16/9) {
  .fixed-16-9-container {
    width: auto;
    height: 100vh;
    padding-top: 0;
    aspect-ratio: 16/9;
    margin: 0 auto;
  }
}

2. Angular项目集成 #

• 全局锁定比例的场景：在根组件app.component.html中套入容器，把路由出口等全局内容放在内容层内：

<!-- app.component.html -->
<div class="fixed-16-9-container">
  <div class="fixed-16-9-content">
    <router-outlet></router-outlet>
    <!-- 其他全局业务内容放此处 -->
  </div>
</div>

• 单页面锁定比例的场景：把容器套在对应页面组件的模板外层即可，不影响其他页面。
• 可选配置：如果要禁止用户手动缩放页面，在index.html的head标签中加入meta配置：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

3. 兼容处理 #

• 原有DVD资源适配：给视频、动画等迁移过来的资源加上object-fit: contain属性，避免内容拉伸变形：

.dvd-origin-resource {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

• 老版本浏览器兼容：如果需要兼容不支持aspect-ratio属性的旧浏览器，可以用Angular的事件监听动态调整容器尺寸，替换CSS媒体查询的逻辑：

// app.component.ts
import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 监听窗口尺寸变化，动态适配容器
  @HostListener('window:resize')
  adjustContainerSize() {
    const container = document.querySelector('.fixed-16-9-container') as HTMLElement;
    const screenRatio = window.innerWidth / window.innerHeight;
    if (screenRatio < 16/9) {
      container.style.width = 'auto';
      container.style.height = '100vh';
      container.style.paddingTop = '0';
    } else {
      container.style.width = '100vw';
      container.style.height = '0';
      container.style.paddingTop = '56.25%';
    }
  }

  ngOnInit() {
    // 页面初始化时执行一次适配
    this.adjustContainerSize();
  }
}

• 全屏场景适配：调用浏览器全屏API时，容器会自动适配全屏尺寸，黑边逻辑无需额外调整。

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