TECNato – TIC's Perú

Obtener el Alto y el Ancho del Navegador con jQuery

Lunes, 7 de Octubre del 2013 4 comentarios

obtayacjq
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:

Paso 2:

Ahora le damos un poco estilos CSS:

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.

Paso 4:

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

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 !


Escrito por para TECNato

4 comentarios

  • Hector Medina
    18 de Marzo del 2016

    Simple pero muy util el tutorial muchas gracias

  • juanjava
    20 de Abril del 2017

    excelente tu aporte, por otro lado me puedes decir como le hago para que cuando vaya cambando el tamaño de la ventana me de los valores sn necesdad de loa botones, ml gracas por la ayuda

  • juanjava
    20 de Abril del 2017

    perdón y quisera valores en php, se podra?

  • Juan Castro Lurita
    21 de Abril del 2017

    ok junto con javascript creas el array de datos, te dejo un ejemplo:
    https://pastebin.com/JH4s9Lvw

Deja tu comentario

(Iniciar sesión)

TECNato

TECNato nace de la idea de crear un espacio virtual de usuarios Peruanos para compartir conocimientos sobre TIC’s (Tecnologías de la Información y Comunicación)

Hazte miembro

TECNato es libre y abierto a nuevos miembros Peruanos, que estén dispuestos a compartir sus conocimientos en TIC’s, escribenos para mas detalles.

Soporte

Diseño Web:
Grupo Sistemas
Gestor de contenidos:
WordPress