Me gustaría saber un poco cuando miro este código:JS "Ventana" ancho-altura frente a "pantalla" ancho-alto?
// Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
...
// Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
¿Cuál es la diferencia entre $(document).height(); y $(window).height();?
$(document).height es el área interior de la ventana gráfica, esencialmente desde la parte inferior de la barra de herramientas/barra de la URL hasta la barra de estado/barra de desplazamiento inferior/parte inferior de la ventana. El $(window).height obtiene toda la altura de la ventana, incluidos elementos como la barra de direcciones y las barras de desplazamiento.
La ventana es el objeto del lado del cliente de nivel superior, que contiene el documento. Esto muestra que tanto jsFiddle $(window).height() y $(document).height() devolver el mismo valor: http://jsfiddle.net/jackrugile/5xSuv/
ventana es el tamaño de la ventana y no incluye ninguna de la interfaz del navegador Chrome o, si no me equivoco. Creo que los valores de ambos siempre serán los mismos, a menos que hagas referencia a algo así como un iframe dentro de una ventana.
Esto es realmente correcto. He votado para eliminar mi respuesta para que no confunda a las personas en el futuro. – tj111
El paréntesis de abrir y cerrar después de la altura y el ancho es importante. No es como screen.width. :) –
El código jsfiddle de @jackrugile devuelve los mismos valores para documento y ventana porque el código jsfiddle se ejecuta dentro de un iframe.
Para hacer las cosas más claras si no se está ejecutando marcos -
Espero que ayude y aclare las cosas.
Pantalla - Su pantalla: el valor de tamaño cambia con el tamaño de su monitor.
screen.availWidth //There is no screen.height
ventana o Documento - La ventana del navegador (la ventana del navegador, sin incluir barras de herramientas y barras de desplazamiento). Ignora la parte desplazable invisible si la página es desplazable. Use 'ventana' para IE9 y superior, es simple.
window.innerHeight //IE9, Chrome, Safari, Firefox
document.documentElement(or body).clientHeight //IE 8,7,6,5
Nota: Ventana y Documento no son los mismos. El objeto de documento (desde DOM) es una propiedad del objeto Window (desde la BOM). Pero da el mismo tamaño. Desde W3Schools, me gustaría pensar que 'Ventana' es la notación para las nuevas versiones de navegador (IE9, Chrome, Firefox, etc.) y 'documento' es para IE 8,7,6,5.
http://www.w3schools.com/js/js_window.asp, y también probado lo anterior con una página aspx simple en monitores de diferentes tamaños.
Gracias! ¡Me encanta la velocidad de ustedes! : P – Jeff
No estoy seguro de si esto es correcto, obtengo los mismos valores para ambos. Vea mi jsFiddle a continuación. – jackrugile
Esto está mal. La altura del documento es la altura de todo el documento, incluso la parte fuera de la ventana que debe desplazarse hacia abajo y ver. La altura de la ventana es la altura de la ventana gráfica. Para una vista sin desplazamiento, estos podrían ser los mismos. – keithhackbarth