Angular 14应用如何锁定屏幕始终横向显示？

一、修复CSS旋转后内容无法占满全屏的问题 #

你之前的CSS仅做了旋转，但未调整元素的位置和原点，导致内容无法适配屏幕。可以用以下CSS解决：

@media only screen and (orientation: portrait) {
  html, body {
    margin: 0;
    padding: 0;
    width: 100vh;
    height: 100vw;
    overflow: hidden;
  }
  body {
    transform: rotate(90deg) translateY(-100%);
    transform-origin: top left;
    position: absolute;
    top: 0;
    left: 0;
  }
}

• 重置html和body的边距、内边距，避免留白
• 设置transform-origin为左上角，确保旋转后的元素对齐屏幕
• 通过translateY(-100%)修正旋转后的位置偏移
• 开启overflow: hidden防止出现滚动条

二、JavaScript方向锁定的替代方案 #

你提到的lock()方法已被废弃，相关说明如下：

• Screen.lockOrientation()：该方法已被废弃，不再被浏览器推荐使用，部分浏览器可能已停止支持。
• ScreenOrientation.lock()：此方法同样已标记为废弃，当前标准的替代方案是使用screen.orientation.lock()，属于Screen Orientation API的正式实现。

在Angular 14中，你可以通过以下方式实现方向锁定（注意：浏览器要求必须由用户交互触发，比如按钮点击，不能自动执行）：

// 组件代码示例
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  lockToLandscape(): void {
    if (screen.orientation?.lock) {
      screen.orientation.lock('landscape')
        .then(() => console.log('屏幕已锁定为横向'))
        .catch(err => console.error('锁定失败:', err.message));
    } else {
      console.warn('当前浏览器不支持屏幕方向锁定API');
    }
  }
}

在模板中添加触发按钮：

<button (click)="lockToLandscape()">锁定横向显示</button>

注意：屏幕方向锁定需要在HTTPS环境下才能生效，部分移动浏览器可能还有额外的权限限制。

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