Tengo un div ( #container ) que contiene otro div ( #main ) que tiene un ancho fijo de 400 px y una altura de 450 px.
#main contiene dos cuadrículas: una cuadrícula de 6x1 y una cuadrícula de 7x6.
Mi objetivo es tener #principal proporcionalmente a escala en tamaño, en caso de que el #contenedor tenga menos de 450 px de altura, para que las cuadrículas dentro de #principal permanezcan proporcionalmente exactas.
He usado jquery para escalar #main en el documento listo y cambiar el tamaño de la ventana. Esto funciona perfectamente cuando se usa el escritorio y se escala la pantalla.
Sin embargo, cuando pruebo en diferentes dispositivos en Chrome Inspector, #main aparece fijo en 400w + 450h. La consola registra ancho y alto como menos que esto. No puedo entender cuál es la solución.
function scaleMain() { let containerHeight = $('#container').height(); let containerWidth = $('#container').width(); if (containerHeight < 450) { let scaleValue = (containerHeight / 450. * 100) $('#main').css("transform", "scale(0." + scaleValue + ")"); } else if (containerHeight < 400) { let scaleValue = (containerHeight / 400. * 100) $('#main').css("transform", "scale(0." + scaleValue + ")"); } else { $('#main').css("transform", "none"); } console.log('Container Height: ' + containerHeight + 'px') console.log('Container Width: ' + containerWidth + 'px') } $(document).ready(function() { scaleMain(); }); $(window).resize(function() { scaleMain(); });Muchas gracias
Dos problemas que puedo ver en tu código. Está ejecutando console.log en valores que no se modifican en la función. Establece la variable, ejecuta algunas transformaciones css y luego consola. Registre la misma variable, por lo que no está seguro de lo que espera allí.
La segunda cosa es que cuando usa transform , los valores de alto y ancho no cambian. Como puede ver en el ejemplo a continuación, esos números permanecen estáticos. Esa es realmente la belleza de la transform : afectar ciertos elementos HTML sin tener que volver a dibujar la página.
$('.box').css('transform','scale(.6)'); console.log($('.box').width()) .box{ width:100px; height:100px; background:#000; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='box'></div>A menos que tenga una razón convincente para usar la transformación, considere usar solo ese valor de escala para afectar el ancho/alto. Eso permitirá que otros elementos html adyacentes fluyan y se ajusten.
let scale = .6; let w = $('.box').width() * scale; let h = $('.box').height() * scale; $('.box').css({'height' : h, 'width' : w}) console.log($('.box').width()) .box{ width:100px; height:100px; background:#000; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='box'></div>