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

Issue

I have an Angular application which is best viewed in resolution higher than 1600 x 900.

Is there anyway I can automatically show a warning message to the user if user is trying to view the application with less than 1600 width (either in restored mode or using lower resolution)? If possible, using bootstrap css.

Solution

We use hostlistener to check window size during resize, but we also check width on component init ngOnInit() because component might start without resize event.

@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'
      );
    }
  }
}

Working example: https://stackblitz.com/edit/angular-window-width-1qbtpx?file=src%2Fapp%2Fapp.component.ts

Answered By - Joosep.P