Los últimos tutoriales de desarrollo web
 

Ventana innerWidth y innerHeight Propiedades

<Ventana Object

Ejemplo

Obtener la altura de la ventana y el ancho: (NOT including toolbars/scrollbars) :

var w = window.innerWidth;
var h = window.innerHeight;
Inténtalo tú mismo "

Más "Try it Yourself" ejemplos a continuación.


Definición y Uso

La propiedad innerWidth devuelve el ancho interior del área de contenido de una ventana.

La propiedad innerHeight devuelve la altura interna del área de contenido de una ventana.

Estas propiedades son de sólo lectura.

Consejo: Utilice los outerWidth y outerHeight propiedades para obtener la anchura / altura con barras de herramientas / barras de desplazamiento.


Soporte del navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.

Propiedad
innerWidth 1.0 9.0 1.0 3.0 9.0
innerHeight 1.0 9.0 1.0 3.0 9.0

Note: Para IE8 y anteriores, puede utilizar los ClientWidth y clientHeight propiedades (See "More Examples" below) .


Sintaxis

window.innerWidth
window.innerHeight

Detalles técnicos

Valor de retorno: Un número, que representa la anchura interior y / o la altura interior del área de contenido de la ventana del navegador, en píxeles

Ejemplos

Más ejemplos

Ejemplo

Una solución multi-navegador (usando clientWidth y clientHeight para IE8 y anteriores):

var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
Inténtalo tú mismo "

Ejemplo

Una demostración de innerWidth, innerHeight, outerWidth y outerHeight en un ejemplo:

var txt = "";
txt += "<p>innerWidth: " + window.innerWidth + "</p>";
txt += "<p>innerHeight: " + window.innerHeight + "</p>";
txt += "<p>outerWidth: " + window.outerWidth + "</p>";
txt += "<p>outerHeight: " + window.outerHeight + "</p>";
Inténtalo tú mismo "

<Ventana Object