Considera el zoom de la pantalla en tu diseño web



Estaba diseñando mi página web, y de repente encontré algo diferente, pensé que por manipular el codigo se había cambiado algo indeseable.


Como mi página que estaba subida al servidor no presentaba tal inconveniente lo que hice es descargarla entera desde Filezilla, pero esa no fué la solución porque al momento de abrirla desde mi local host Xampp el cambio indeseado seguía persistiendo


Me preguntaba porque desde la página en internet se veía como yo quería y porqué desde mi local host se veía un ligero cambio, si yo había descargado el codigo exacto.


Pensé en investigar algunos términos desconocidos que había leído por ahí, porsiacaso ese era el problema, pero antes comenzé a observar los elemento para notar las diferencias.


Mi diseño consiste en tres rectángulos que guardan un extracto de las publicanciones con el extracto de su título utilizando la etiqueta div y php, cuando yo había trabajado en el codigo las cajas eran del mismo tamaño pero ahora de las tres cajas que tenía una estaba más grande debido a que el título era más extenso, pero antes esto último no había sido un impedimento para que las cajas estuvieran del mismo tamaño.


Por supuesto me tomé mi tiempo para revisar el codigo php para ver si no había variado y la respuesta es no. Luego observé las cajas y el texto que había dentro, y me di cuenta que el tamaño de la letra era diferente y pensé que está era la causa y los tamaños de las cajas también estaban distintos, Por supuesto que hay la posibilidad de que el texto determine el tamaño de las cajas.


Así que me descargue una herramienta muy práctica para ver la letra de todas las páginas web incluso está herramienta me funcionó para verificar la letra que tenía en las cajas de mi archivo de mi local host que había descargado de mi página web a través de Filezilla, y vi que el tamaño de la letra y el tipo de letra tanto en el título como en el cuerpo del texto eran los mismos. Pero me decía a mi mismo que no podía ser porque la de la página web se veía más grande y la del local host más pequeña y era el mismo codigo, también me percaté que el tamaño de las cajas era distinto a pesar que tenían los mismos valores no había cambiado nada.


A pesar de que desconocía la razón de las diferencias me di cuenta que este problema se podía solucionar con cuatro alternativas; uno aumentando el tamaño de la letra del título, dos poniendole un padding en el título, tres cambiando el tamaño de las cajas, cuatro modificar ligeramente el codigo php y lo que se busca es algo standard; no tener que modicar el estilo de la caja cada vez que se hace un extracto de un artículo.


La etiqueta div para hacer cajas y el zoom o escalabilidad de pantalla


He aquí lo que hay que tomar en cuenta a la hora de hacer divs cuyo div principal no tenga un color de background en css y cuyos divs secundarios si lo tengan, por lo que se puede notar el tamaño de cada div. Lo último que se me ocurrió es presionar las teclas Ctrl + (más) y Ctrl - (menos) del teclado estando en mi página web subida al Internet, al hacer esto vi que la falla que presentaba el archivo idéntico en mi local host, también se presentaba en mi página web.


Por lo que al momento de diseñar una página web ahí que tomar en cuenta la escalabilidad de la pantalla del pc con las teclas control + ( más) control - (menos) porque a un cierto porcentaje de escala pueden que los Divs de los que le hablo se vean bien, y a otro se vean de diferente tamaño, y es algo que también en un diseño resposive desing porque hoy en día es obsoleto construir una página web si no es apta o adaptable para dispositivos móviles.


En las siguientes imágenes se observa tres cajas hechas con la etiqueta div que tienen el mismo tamaño en css con las propiedades height:30%; width: 29%; como podeis observar a un zoom de 90% hecha con las teclas control + control - las cajas se observa iguales.



zoom diseño web

Si disminuimos el zoom de la pantalla las cajas que tienen las mismas propiedades css antes mencionadas, se observa que el tamaño de la primera caja es distinto debido al contenido. Esto se observa en la segunda imagen.


como el zoom, escalabilidad influye en el tamaño de las cajas divs

En mi caso me habia funcionado para ajustar los divs fue darle en css un font-size: 20px; al titulo, esta solucion trabaja bien si estas definiedno el with y height de los divs con porcentajes, pero hy una solución mejor en el que no sera necesario el font-size, esto pasaria a ser opcional para aumentar la letra y no para ajustar el tamaño de los divs.


La solución:


La solución que descubrí fue definir en css height con 40 vh y a weith con 20vw, estas unidades de medidas se adaptan al zoom de la pantalla.


Otra cosa importante es que una direccion de una pagina web en nuestra computadora la podemos tener con un determinado zoom,y otra dirección o el local host pueden presentar zoom diferentes. Pero esto no influye en vh y vw, puesto que estas medidas se adaptaran al zoom de la pantalla.




Este sitio web utiliza cookies de terceros, al continuar en el mismo, usted acepta todas las cookies que contiene este sitio web.