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

180

Estoy tratando de escribir una función de JavaScript para obtener el ancho actual del navegador.

Encontré este:

javascript:alert(document.body.offsetWidth);

Pero es un problema que falle si el cuerpo tiene un ancho del 100%.

¿Hay alguna otra función mejor o una solución alternativa?

javascript jquery html css Amr Elgarhy
fuente

Respuestas:

133

Actualización para 2017

Mi respuesta original fue escrita en 2009. Aunque todavía funciona, me gustaría actualizarla para 2017. Los navegadores aún pueden comportarse de manera diferente. Confío en que el equipo de jQuery haga un gran trabajo para mantener la coherencia entre navegadores. Sin embargo, no es necesario incluir toda la biblioteca. En la fuente jQuery, la porción relevante se encuentra en la línea 37 de dimensions.js . Aquí se extrae y modifica para funcionar 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() );
Expandir fragmento

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

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 de manera similar 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 ninguna de las propiedades nativas del navegador está definida, regresará undefined.

Travis
fuente
11
La mejor respuesta porque no tengo que incluir una biblioteca de 33k para una redirección simple basada en el ancho de la ventana del navegador
David Aguirre
1
Esto produce los resultados correctos (o esperados) consistentemente en comparación con la implementación de jQuery.
Emmanuel John
3
... cada uno de estos tres muestra algún resultado y todos los resultados (anchos) son diferentes. Por ejemplo, con Google Chrome ver self.innerWidth 423, document.documentElement.clientWidth 326y document.body.clientWidth 406. En tal caso pregunta: ¿cuál es correcto y cuál usar? Por ejemplo, quiero cambiar el tamaño de google map. 326 o 423 gran diferencia. Si ancho ~ 700, ver 759, 735, 742 (no es una gran diferencia)
Andris
1
@ user2118559 var pageWidth = Math.max(self.innerWidth || 0, document.documentElement.clientWidth || 0, document.body.clientWidth || 0);y var windowWidth = self.innerWidth || -1;// por "cuerpo" o "pantalla" o "documento" no son la "ventana" si comprueba un contenido desbordado de html que puede entender. # i.stack.imgur.com/6xPdH.png
Abdullah Aydın el
1
error de copiar y pegar en su ejemplo, getWidth()referencias de funcionesself.innerHeight
theGecko
309

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

caos
fuente
2
Si recordé correctamente, jQuery ha extraído gran parte de las dimensiones al núcleo. ¿Todavía necesitas dimensiones para hacer lo que estás sugiriendo?
Nosredna
Resulta que no. Lo cual es asombroso. Respuesta editada por. Gracias por el aviso.
caos
66
El soporte $ (window) .width () en jQuery es desde la versión 1.2, en caso de que sea relevante para alguien.
caos
18
Descubrí que $ (window) .width () no siempre devuelve el mismo valor que innerWidth / clientWidth según los ejemplos en la respuesta a continuación. La versión de jQuery no tiene en cuenta las barras de desplazamiento del navegador (de todos modos, en FF). Esto me causó mucha confusión con las consultas CSS @media que parecen dispararse en el ancho incorrecto. El uso de código nativo parece ser más confiable ya que tiene en cuenta la apariencia de las barras de desplazamiento.
Codificador
55
¡Agregar 30 mil líneas de código para obtener el ancho de la ventana es una MALA solución!
codechimp
49 
var w = window.innerWidth;
var h = window.innerHeight;
var ow = window.outerWidth; //including toolbars and status bar etc.
var oh = window.outerHeight;

Ambos devuelven enteros y no requieren jQuery. Compatible con navegador cruzado.

A menudo encuentro que jQuery devuelve valores no válidos para width () y height ()

Bradley Flood
fuente
1
Tener problemas para usar esto en Safari iphone.
nu everest
17

¿Por qué nadie menciona matchMedia?

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}

No probé mucho, pero probé con los navegadores predeterminados de Android y los navegadores Chrome de Android, Chrome de escritorio, hasta ahora parece que funciona bien.

Por supuesto, no devuelve un valor numérico, pero devuelve un valor booleano: si coincide o no, puede que no se ajuste exactamente a la pregunta, pero eso es lo que queremos de todos modos y probablemente el autor de la pregunta quiera.

Darius.V
fuente
1
Solo es compatible con IE10 +.
qarthandso
17
Si usan IE9 o una versión anterior, no se merecen Internet.
Darius.V
Safari iPhone no parece soportar esto.
nu everest
Las versiones más recientes de iOS Safari deberían ser compatibles con matchMedia. Fuente: caniuse.com/#feat=matchmedia
Vargr
8

¡Desde W3schools y su navegador cruzado hasta las edades oscuras de IE!

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

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

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";

alert("Browser inner window width: " + w + ", height: " + h + ".");

</script>

</body>
</html>
usuario3651121
fuente
El enfoque funciona de maravilla y podría ser la respuesta aceptada, ya que es mucho más corto que cualquier otra solución (además de usar jQuery).
Simon Steinberger
2
¿No arrojará un error si document.documentElement no está definido?
PhiLho
6

Aquí hay una versión más corta de la función presentada anteriormente:

function getWidth() {
    if (self.innerWidth) {
       return self.innerWidth;
    }
    else if (document.documentElement && document.documentElement.clientHeight){
        return document.documentElement.clientWidth;
    }
    else if (document.body) {
        return document.body.clientWidth;
    }
    return 0;
}
ismael
fuente
44
Que no devuelve un valor si todas las condiciones son falsas.
Mike C
10
No necesitas a los demás :)
Nick
0

Una solución adaptada a la respuesta moderna de JS of Travis:

const getPageWidth = () => {
  const bodyMax = document.body
    ? Math.max(document.body.scrollWidth, document.body.offsetWidth)
    : 0;

  const docElementMax = document.documentElement
    ? Math.max(
        document.documentElement.scrollWidth,
        document.documentElement.offsetWidth,
        document.documentElement.clientWidth
      )
    : 0;

  return Math.max(bodyMax, docElementMax);
};
Sergiu
fuente
0

Una adición importante a la respuesta de Travis; debe colocar getWidth () en el cuerpo del documento para asegurarse de que se cuenta el ancho de la barra de desplazamiento; de lo contrario, el ancho de la barra de desplazamiento del navegador se restará de getWidth (). Lo que hice ;

<body>
<script>
function getWidth(){
return Math.max(document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth);
}
var aWidth=getWidth();
</script>
</body>

y llame a aWidth variable en cualquier lugar después.

burkul
fuente