Tengo una aplicación Angular que se ve mejor en una resolución superior a 1600 x 900.
¿De todos modos puedo mostrar automáticamente un mensaje de advertencia al usuario si el usuario intenta ver la aplicación con menos de 1600 de ancho (ya sea en modo restaurado o con una resolución más baja)? Si es posible, usando bootstrap css.
sí, puedes obtener el ancho de la pantalla usando el objeto de la ventana
dentro de su onInit en TS
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); }Agregue su código de advertencia dentro de onResize o manéjelo en consecuencia.
Usamos hostlistener para verificar el tamaño de la ventana durante el cambio de tamaño, pero también verificamos el ancho en el componente init ngOnInit() porque el componente podría comenzar sin el evento de cambio de tamaño.
@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' ); } } }Ejemplo de trabajo: https://stackblitz.com/edit/angular-window-width-1qbtpx?file=src%2Fapp%2Fapp.component.ts