¿Cómo obtener el ancho del navegador usando código JavaScript?

Si encuentras algún detalle que no entiendes puedes dejarlo en la sección de comentarios y haremos todo lo necesario de ayudarte lo mas rápido que podamos.

Solución:

Es un dolor en el culo. Recomiendo saltarse las tonterías y usar jQuery, que le permite simplemente hacer $(window).width().

Actualización para 2017

Mi respuesta original fue escrita en 2009. Si bien aún funciona, me gustaría actualizarla para 2017. Los navegadores aún pueden comportarse de manera diferente. Confío en que el equipo de jQuery hará un gran trabajo para mantener la coherencia entre navegadores. Sin embargo, no es necesario incluir toda la biblioteca. En la fuente de jQuery, la parte relevante se encuentra en la línea 37 de dimension.js. Aquí se extrae y modifica para que funcione de forma independiente:

function getWidth() 
  return Math.max(
    document.body.scrollWidth,
    document.documentElement.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.offsetWidth,
    document.documentElement.clientWidth
  );


function getHeight() 
  return Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.offsetHeight,
    document.documentElement.clientHeight
  );


console.log('Width:  ' +  getWidth() );
console.log('Height: ' + getHeight() );

---

Respuesta Original

Dado que todos los navegadores se comportan de manera diferente, primero deberá probar los valores y luego usar el correcto. Aquí hay una función que hace esto por ti:

function getWidth() 
  if (self.innerWidth) 
    return self.innerWidth;
  

  if (document.documentElement && document.documentElement.clientWidth) 
    return document.documentElement.clientWidth;
  

  if (document.body) 
    return document.body.clientWidth;
  

y análogamente para la altura:

function getHeight() 
  if (self.innerHeight) 
    return self.innerHeight;
  

  if (document.documentElement && document.documentElement.clientHeight) 
    return document.documentElement.clientHeight;
  

  if (document.body) 
    return document.body.clientHeight;
  

Llame a ambos en sus scripts usando getWidth() o getHeight(). Si no se define ninguna de las propiedades nativas del navegador, devolverá undefined.

var w = window.innerWidth;
var h = window.innerHeight;
var ow = window.outerWidth; //including toolbars and status bar etc.
var oh = window.outerHeight;

Ambos devuelven números enteros y no requieren jQuery. Compatible con varios navegadores.

A menudo encuentro que jQuery devuelve valores no válidos para ancho () y alto ()

---

---

Utiliza Nuestro Buscador