Obteniendo la altura y el ancho del cuerpo o la ventana de la página web

Question

Dependiendo del modo de IE8 en el que me encuentre (caprichos o estándar) obtengo valores diferentes para la altura y el ancho. He intentado javascript y jquery estándar, pero ambos arrojan resultados diferentes.

En Peculiaridades

$('body').width = 1239 
$('body').height = 184 
document.body.clientWidth = 1231 
document.body.clientHeight = 176 

En las normas

$('body').width = 1260 
$('body').height = 182 
document.body.clientWidth = 1254 
document.body.clientHeight = 176 

Alguna idea de cómo obtener un valor sin cambios por el modo de IE8.

Gracias en adv.

Answer 1

Tal vez el problema se debe a las barras de desplazamiento se incluyen en la anchura y altura, independientemente de si son o no existe. No tengo IE (en un Mac), así que no puedo verificar.

Sin embargo, te puedo decir lo que funciona como en mi proyecto jQuery Lightbox No tengo ese problema. Usamos el siguiente código en él: pantallas

// Make the overlay the size of the body 
var $body = $(this.ie6 ? document.body : document); // using document in ie6 causes a crash 
$('#lightbox-overlay').css({ 
width: $body.width(), 
height: $body.height() 
}); 

// ... some code ... 

// Get the window dimensions 
var $window = $(window); 
var wWidth = $window.width(); 
var wHeight = $window.height(); 

y el recubrimiento correctamente. Confío en el resultado de jQuery del ancho y la altura en comparación con el resultado nativo, ya que jQuery, naturalmente, debe tener en cuenta las peculiaridades del navegador.

Es importante tener en cuenta que la secuencia de comandos de la caja de luz anterior tiende a preferir $(document) sobre $(document.body) por alguna razón. No recuerdo haberlo disculpado: ¿O quizás esto también resuelve el problema?

Answer 2

Solo una instantánea. Trate de darle a su cuerpo #page:

function getPageHeight() { 
    var pageHeight = document.getElementById('page').offsetHeight; 
    var pageWidth = document.getElementById('page').offsetWidth; 

    alert(pageHeight); 
    alert(pageWidth); 
} 

Answer 3

Prueba esto:

var viewport = { 
    width : $(window).width(), 
    height : $(window).height() 
}; 

var width = viewport.width; 
var height = viewport.height;