En este tutorial veremos como crear un script en Jquery – Javascript que nos permita ver la resolución del navegador a medida que lo vamos redimensionando
Porqué es útil este script?
Es muy útil cuando estamos desarrollando una web responsive y así podamos saber cuales son las resoluciones correctas para crear los mediaqueries, y así tratar de que nuestro proyecto web se adapte a los diferentes dispositivos móbiles, pantallas y resoluciones.
Lo primero que tenemos que hacer es crear un documento básico HTML5, como el que vemos acontinuación (Puedes copiarlo, al final del artículo encontrarás los archivos fuente del proyecto)
[html]
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title></title>
<meta name=”description” content=””>
</head>
<body>
</body>
</html>
[/html]
Lo siguiente será crear un div vacío dentro del Body con el id: “divMuestraAncho”
[html]
<body>
<div id=”divMuestraAncho”></div>
</body>
[/html]
Después cargamos la librería Jquery desde el CDN de google dentro de la etiqueta “head” de nuestro HTML
[html]
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script>
</head>
[/html]
Por último insertamos el siguiente código dentro de nuestro head debajo del script anterior (Jquery), también dentro de la etiqueta “head” de nuestro HTML
[html]
<script type=”text/javascript”>
var mostrarAncho = 1;
if(mostrarAncho == 1){
$(document).ready(function(){
$(window).resize(function(){
var ancho = $(window).width();
document.getElementById(“divMuestraAncho”);
divMuestraAncho.innerHTML = “Ancho de la ventana: ” + ancho.toString() + “px”;
});
});
}
</script>
[/html]
Básicamente lo que hace el script anterior es tomar el ancho y mostrarlo dinamicamente (a medida que se redimensiona el navegador) dentro del “divMuestraAncho”
Creamos una variable con el nombre mostrarAncho y la inicializamos en 1 después evaluamos con un condicional si esa variable es exactamente igual a 1 y si es así ejecutará una función que llama a un método “resize” que se aplica a toda la ventana, después dentro de la misma función se crea otra variable con el nombre ancho donde se guarda el ancho que se tenga en el navegador en el momento; Después se obtiene el div donde se quiere mostrar el ancho del navegador a través de su ID, haciendo uso de Javascript (document.getElementById(“divMuestraAncho”). Por último también con Javascript y el método innerHTML pasamos un String (“Ancho de la ventana”) y le concatenamos el ancho que habiamos guardado en la variable, eso sí convirtiendola a string para su salida con el método “toString()”.
Ya con esto tendremos nuestro script funcionando y podrás obtener el ancho del navegador a medida que lo vas redimensionando como en la imagen siguiente
