Tamaño del navegador (ancho y alto)

Question

Estoy tratando de detectar el tamaño actual del navegador (ancho y alto). Sé que es muy fácil en jQuery con $(document).width and $(document).height, pero no quiero agregar el tamaño de jQuery lib al proyecto, así que prefiero usar JavaScript incorporado. ¿Cuál sería la forma corta y eficiente de hacer lo mismo con JavaScript?

Answer 1

// first get the size from the window 
// if that didn't work, get it from the body 
var size = { 
    width: window.innerWidth || document.body.clientWidth, 
    height: window.innerHeight || document.body.clientHeight 
} 

Answer 2

Pruebe esto;

<script type="text/javascript"> 
winwidth=document.all?document.body.clientWidth:window.innerWidth; 
winHeight=document.all?document.body.clientHeight:window.innerHeight; 
alert(winwidth+","+winHeight); 
</script> 

Answer 3

function getWindowSize(){ 
var d= document, root= d.documentElement, body= d.body; 
var wid= window.innerWidth || root.clientWidth || body.clientWidth, 
hi= window.innerHeight || root.clientHeight || body.clientHeight ; 
return [wid,hi] 
} 

navegadores IE son los únicos que no utilizan innerHeight y anchura.

Pero no hay implementaciones de navegador 'estándar'.

Pruebe el html (document.documentElement) clientAltura antes de comprobar el cuerpo: si no es 0, es la altura de la "ventana gráfica" y body.clientHeight es la altura del cuerpo, que puede ser mayor o más pequeño que la ventana.

El modo hacia atrás devuelve 0 para el elemento raíz y la altura de la ventana (ventana gráfica) del cuerpo.

Lo mismo con el ancho.

Answer 4

El uso de mi caso para window.innerWidth involucró la construcción de una ventana emergente modal personalizada. En pocas palabras, el usuario hace clic en el botón, la ventana emergente se abre centrada en el navegador y hay un bkgd negro transparente detrás de la ventana emergente. Mi problema era encontrar el ancho y alto del navegador para crear el bkgd transparente.

El window.innerWidth funciona muy bien para encontrar el ancho, pero recuerda window.innerWidth and window.innerHeight no compensa las barras de desplazamiento, por lo que si su contenido va más allá del área de contenido visible. Tuve que restar 17px del valor.

transBkgd.style.width = (window.innerWidth - 17) + "px"; 

Dado que el contenido del sitio siempre fueron más allá de la altura visible no pude usar window.innerHeight. Si el usuario se desplaza hacia abajo, el bkgd transparente terminaría en ese punto y eso se vería desagradable. Para mantener el bkgd transparente hasta el final del contenido, utilicé document.body.clientHeight.

transBkgd.style.height = document.body.clientHeight + "px"; 

Probé la ventana emergente en IE, FF, Chrome, y se ve bien en todos los ámbitos. Sé que esto no sigue demasiado la pregunta original, pero creo que podría ayudar si alguien más se encuentra con el mismo problema al crear una ventana emergente modal personalizada.

Answer 5

Aquí es un ejemplo de código

function getSize(){ 

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

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


}