Estoy tratando de hacer una página web que cambie de tamaño según el tamaño de la ventana y el siguiente código parece ser la solución.
var scale = Math.min( availableWidth / contentWidth, availableHeight / contentHeight );
¿Podría alguien decirme por qué funciona esto y qué estamos haciendo exactamente con esto?
Consulte esto para obtener más información.
El código que publicaste toma la relación porcentual entre el ancho de un determinado componente y el ancho de toda la página y la altura del mismo componente con la altura de toda la página, pero solo obtiene la proporción más pequeña entre los dos calculada para considere si la página está en formato horizontal o vertical.
Aparentemente, este número resultante de esta línea que publicó se utilizará para que pueda calcular el valor que desea obtener dado el cambio en la pantalla predeterminada que solía dibujar. Suponiendo que el lienzo en el que está dibujando el diseño predeterminado es de 1024 px por 768 px, lo haríamos así:
var scale = Math.min( availableWidth / /*1024px*/ contentWidth, /*500px => (100 / 2048) = 48.82% of available height */ availableHeight / /*768px/* contentHeight /*145px (100 / 5.2965) = 19.02% of available height*/ );En este caso su línea traería 19.02%, porque el método Math.min trae el más pequeño de la matriz. Por lo tanto, usaría la altura de este objeto como referencia para determinar también su ancho, con el fin de tratar de mantener la relación de aspecto de la página. Pero lo ideal, en mi opinión, es que aprendas a lidiar con el diseño flexible, tal vez incluso con bootstrap, para construir cuadrículas receptivas con menos trabajo, ya que el CSS escalará por ti según el tamaño de la pantalla de forma nativa, sin necesidad de calculos ;D
Creo que este código está tratando de calcular la proporción de escala que debe ajustar el contenido en función de los diferentes tamaños de ventana.
Por ejemplo, diseña el sitio web en la ventana de tamaño 1600*960px, pero parte del contenido no se puede mostrar completamente cuando va a una ventana de 300*200, por lo que necesita tener una proporción a escala para que el contenido pueda ser mostrado en el estilo correcto
Los availableHeight y availableWidth son el tamaño de la ventana. contentWidth y contentHeight es el tamaño de un contenido específico ( div en el documento)
Divide el tamaño de la ventana al tamaño del contenido y obtiene el más pequeño de ellos usando Math.min() se asegurará de usar la mayor cantidad de espacio de la ventana, pero no hará que el contenido sea demasiado grande o no siga el efecto que desea.