如果用户的浏览器宽度小于 x 则显示警告

Question

我有一个 Angular 应用程序，最好在高于 1600 x 900 的分辨率下查看。

如果用户试图查看宽度小于 1600 的应用程序（在恢复模式下或使用较低分辨率），我是否可以自动向用户显示警告消息？如果可能，使用 bootstrap css.

Answer 1

是的，您可以使用 window object

获取屏幕宽度

在 TS 中的 onInit 中

  import { HostListener } from '@angular/core';
  public innerWidth: any;
  ngOnInit() {
    this.innerWidth = window.innerWidth;
  }
  @HostListener('window:resize', ['$event'])
  onResize(event) {
  //you'll get the width
    this.innerWidth = window.innerWidth;
    console.log('this.innerWidth', this.innerWidth);
  }

在 onResize 中添加您的警告代码或进行相应处理。

Answer 2

我们使用 hostlistener 在调整大小期间检查 window 大小，但我们也在组件初始化时检查宽度 ngOnInit() 因为组件可能在没有调整大小事件的情况下启动。

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  host: {
    '(window:resize)': 'onWindowResize($event)',
  },
})
export class AppComponent implements OnInit {
  name = 'Angular';
  width: number = window.innerWidth;
  height: number = window.innerHeight;
  goodWidth: number = 1600;

  ngOnInit(): void {
    this.getInitSize();
  }

  getInitSize() {
    this.width = window.innerWidth;
    this.height = window.innerHeight;
    this.shouldAlert();
  }

  onWindowResize(event) {
    this.width = event.target.innerWidth;
    this.height = event.target.innerHeight;
    this.shouldAlert();
  }

  shouldAlert() {
    if (this.width < this.goodWidth) {
      window.alert(
        'warning message to the user if user is trying to view the application with less than 1600 width'
      );
    }
  }
}

工作示例：https://stackblitz.com/edit/angular-window-width-1qbtpx?file=src%2Fapp%2Fapp.component.ts

如果用户的浏览器宽度小于 x 则显示警告

Show warning if user's browser width is less than x

javascript

bootstrap-4

angular