Estoy tratando de hacer una página web ahora y quiero mostrar mi contenido con un límite de tamaño. Por ejemplo, si el ancho supera los 1000 px y la altura supera los 1000 px, aparece la página de alerta. Y si el tamaño de la ventana es ancho < 1000 px y alto < 1000 px, la página de Alerta está oculta y se mostrará el contenido. Ahora hice una que dice que su pantalla es demasiado grande y hace que la página web tenga el tamaño completo. Y con Javascript le di una condición que puede verificar el tamaño de la ventana y si se ajusta a la clase oculta que tiene pantalla: oculto agregará o eliminará. este es mi codigo javascript

 const width = window.innerWidth; const height = window.innerHeight; //in the html there is no class: hidden. So alert page is show default. function removeSizeAlert() { const sizeAlert = document.querySelector(".too-bgsm-size"); sizeAlert.classList.add("hidden"); } function addSizeAlert() { const sizeAlert = document.querySelector(".too-bgsm-size"); sizeAlert.classList.remove("hidden"); } function init() { if (width < 600 && height > 950) { removeSizeAlert(); } else { addSizeAlert(); } } init();

Aquí quiero hacer esto más interactivo. Ahora este código funciona solo cuando actualizo la página. Pero quiero que cuando cambie el tamaño de la página, detecte el evento de cambio de tamaño y agregue o elimine la clase oculta simultáneamente. Hay una manera de hacer como esto?