TECNato – TIC's Perú

A veces cuando estamos muy metidos desarrollando un proyecto web, necesitamos obtener las medidas de la ventana del Navegador por algun motivo.
En este Tutorial les voy a mostrar como podemos obtener el Ancho y el Alto de la ventana de nuestro navegador con el framework jQuery.

Utilizaremos las funciones .width() y .height().

Comencemos:

Paso 1:

Primero hacemos referencia a nuestro archivo del framework jQuery, colocamos antes de la etiqueta < / head >, lo siguiente:

src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"

Paso 2:

Ahora le damos un poco estilos CSS:

body{padding:20px;}
.btncls{padding: 10px; background-color:#000; color:#fff; border:none; cursor:pointer; margin:10px;}
.txtcls{color:#44f; font-size:20px;}

Paso 3:

Ahora creamos nuestros 2 botones uno para obtener el ancho y otro para obtener el alto de nuestra ventana. Asi mismo crearemos 2 capas, uno para mostrar el ancho y otro para mostrar el alto.

Obtener ancho
Obtener alto
 
 

Paso 4:

Ahora creamos nuestras funciones, una para obtener el ancho y otra para obtener el alto:

 
function obtenerAncho( obj, ancho ) {
  $( "#anvent" ).text( "El ancho de la " + obj + " es " + ancho + "px. (Width)" );
}
$("#obtan").click(function() {
  obtenerAncho( "ventana", $( window ).width() );
});

 
function obtenerAlto( obj, alto ) {
  $( "#alvent" ).text( "El alto de la " + obj + " es " + alto + "px. (Height)" );
}
$( "#obtal" ).click(function() {
  obtenerAlto( "ventana", $( window ).height() );
});

Listo !

Eso es todo, les dejo una demo:
DEMO

En la Demo Puedes jugar con la ventana del navegador, estíralo y dale mas alto o mas ancho, para ver sus medidas, tanto el ancho como el alto, como gustes.
Ademas en la Demo pueden ver el código fuente de este tutorial solo le dan botón derecho del mouse y luego en la opción de ver código fuente.

Que tengas un buen día !