2

de este tema se ha hablado mucho pero no encuentro el resultado deseado. Lo voy a explicar con imágenes de bootstrap.

Esta imagen muestra los elementos del DOM perfectamente a un ancho de 1680 y el zoom de 100%, es la vista normal de mi pantalla

ancho 1680 con un zoom de 100%

cambio la resolucion a 800x600 que es mínimo posible en un PC, dejo el zoom en 100% y este es el resultado.

introducir la descripción de la imagen aquí

Bootstrap hace su trabajo bien al colocar una debajo de otra las columnas del grid, va bien para los móviles pero los resultados que busco con solo para PC.

Ahora, dejo el ancho de la pantalla en 800 y ajusto manualmente el zoom al 50%

introducir la descripción de la imagen aquí

Noten que los elementos se ven igual que en la vista normal a 1680 y zoom 100% pero mas pequeños, esto es exactamente lo que deseo pero de forma automática, lo he intentado con Css, con viewport, etc.

la linea de codigo seria...

Si el ancho de la pantalla es = 800 entonces ponga el zoom del navegador en 50%

Bueno, de antemano gracias por sus comentarios...

3
  • ¿Porque específicamente quieres que se vea de ese modo? Recuerda que lo mejor es testear en el dispositivo directamente y no con el monitor, sí aún quieres intentarlo, te sugiero hacerlo usar un media query especifico del dispositivo donde notes el error y que modifiques el tamaño de la letra en ese ancho verás como cambia (usando bootstrap 4) como si estuviera en zoom. el 6 ago. 2018 a las 16:27
  • Por uniformidad en todos los pc´s. me dio por probar en mi monitor precisamente por que vi mi aplicacion en otro pc con resolucion mas pequeña y me pareció feisimo. La aplicación es totalmente hecha con bootstrap 4 y las imágenes que mostré son de bootstrap 4 y, como ves, no hace lo que dices. Gracias.
    – wings77
    el 6 ago. 2018 a las 23:00
  • Lo mejor es lograr la unformidad con estilos modificadores en x resolución, no tanto con el zoom, los cambios de letras si usaste la resolución em y rem, se solucionan con solo cambiar el tamaño del contenedor principal o del body y solo eso cambia la interfaz para que no se vea tan bold en ciertas resoluciones. el 7 ago. 2018 a las 0:07

1 respuesta 1

0

el zoom del viewport lo defines con esta meta etiqueta:

y con el js siguiente puede cambiar el zoom segun su dimencion siendo 1 =100%, 0,5 el 50% y 1,5 el 150%

if (screen.width <= 480) {
 document.getElementById("viewport").setAttribute("content", "width=480; initial-scale=0.5");
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.