Estoy creando un sitio web que simplemente convierte una base de 1 número a otro número, y mostrará una tabla que muestra todos los valores numéricos. A veces, la tabla es demasiado grande y cambio la propiedad de zoom para que quepa.

Así es como debería verse (localhost):

Así es como se ve en el servidor web (el zoom no funciona):

Aquí está el sitio web del servidor web si desea probarlo usted mismo

Aquí está el código para obtener el zoom (se ejecuta cuando el usuario hace clic en el botón de conversión):

 const numberGridFlexboxWidth = document.getElementById('numberGridFlexbox')!.clientWidth; const screenWidth = window.innerWidth; var zoom = screenWidth / numberGridFlexboxWidth * 100; if (zoom < 100) { zoom = zoom - (zoom * 0.05) }//subtract 5% to account for the padding and margins else { zoom = 100; } //zoom never goes higher than 100 if (zoom < 50) { zoom = 50; } //zoom never goes lower than 50% this.dataservice.zoom = Math.round(zoom);

Escribe el nivel de zoom en una variable en un servicio de datos, y aquí está el código que vincula el zoom a la propiedad css (app.component.html):

 <!-- Shell Page --> <div class="container" [ngStyle]="{'zoom': dataservice.zoom + '%'}"> <div style="width: 100%; text-align: center;"><h1><u>Base Converter</u></h1></div> <app-header></app-header> <app-main></app-main> </div>

El problema radica en la línea: this.dataservice.zoom = Math.round(zoom);

El zoom funciona si asigno this.dataservice.zoom a un valor real, por ejemplo, si escribo this.dataservice.zoom = 50 , entonces funciona en el servidor web, pero también verifiqué la variable de zoom local y es el valor correcto, así que realmente no sé cuál es el problema.

Editar: descubrí que si hace clic en el botón de conversión dos veces en el servidor web, se ampliará correctamente, por lo que tal vez sea un problema de no enlazar correctamente la primera vez. ¿Hay alguna diferencia en cómo funciona el enlace en localhost en comparación con un servidor web?

Resuelto: la función se estaba ejecutando antes de que se cargara la tabla, así que la moví para que se ejecutara después de que se cargara y resuelve el problema.