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?
Respuestas:
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() );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.
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)
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
getWidth()referencias de funcionesself.innerHeight
Es un dolor en el culo . Recomiendo omitir las tonterías y usar jQuery , que le permite simplemente hacerlo $(window).width().
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 ()
¿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.
¡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>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;
}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);
};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.