X
    Categories: Desarrollo webJquery

Obtener el ancho y el alto del navegador con jquery

Las tendencias en diseño hace que cada vez los desarrolladores (nosotros) deben crear capas que ocupen el 100% del ancho y el 100% del alto que se te pude volver un drama pero en este articulo te enseño lo facil que resulta hacer esto.

Jquery sin duda alguna nos facilita la vida y esta vez con una 2 funciones basicas de dicha libreria nos brindara las la medida del alto y ancho del navegador .width() y .height()    pero ahora de que sacamos el alto y el ancho? del document o window?  llego a este punto y  pueda que lo tengan claro pero quiero dejar esto claro para que no quede duda alguna. document nos brindara la medida de todo el contenido del html entonces no es lo que necesitamos y window nos da la medida que tiene el navegador/ browser y a fin de cuenta es toda la pantalla que muestra al abrir la pagina asi q esto si calza a nuestro requerimiento que tenemos.

listo!! entonces obtenemos el alto y ancho del navegador

width=$(window).width();
height=$(window).height();

ahora que hago?… ok ya tenemos el alto y ancho entonces asumimos que nuestra web tendra varias secciones para abajo y estaran en la etiqueta section. las medidas que obtuvimos debemos darle al section. ya teniendo en claro el caso crearemos una funcion que le de la medida al section.

function section()
{
    width=$(window).width();
    height=$(window).height();
    $("section").width(width).height(height);
}
$(document).ready(function(){
    section(); 
})

Con esto ya tienes todo listo para tener tu section con el alto y ancho del navegador Pero que sucede si comienzan a cambiar de tamaño? todo se veria mal y la solucion es simple pero eficaz.

$(window).resize(function(){
    section(); 
})

Y es asi como tienes un codigo simple y limpio para tus desarrollos espero que te sirva este articulo.

Luis Rodriguez: Hola, Soy Luis Rodriguez, radico en Lima – Perú, formado en una carrera informática, desempeñando desde el 2007 como programador web y viendo proyectos desde Front End y Back End a lo que me perfile como Full Stack. Esta Experiencia junto a mi interés en la Analítica Web me ayudó mucho entender el funcionamiento interno de las herramientas de analítica, con las que vengo trabajo activamente desde 2017. Linkedin