Muchos de nosotros ( programadores) tendemos a confundir los elementos documento y ventana, cuando son elementos diferentes pero muy estrechamente relacionados. El primero hace referencia al recurso que solicitamos y que se carga en el navegador ( la página en sí) mientras que la ventana hace referencia al tamaño del viewport ( es el área visible para el usuario dentro del navegador web). La siguiente imagen nos lo aclara de forma más sencilla:
Diferencia entre Documento y Ventana
Como podemos ver, en muchos casos el alto del documento es mucho mayor que el de la ventana (Pero no siempre sucese), mientras que el ancho del documento será siempre al menos el ancho de la ventana (pero puede ser mayor). Ahora bien, entrando en materia, cuando trabajamos con JQuery determinar los límites de la ventana y del docuemento nos basta con emplear los siguientes métodos.
Dimensiones de la ventana
1 2 3 4 | jQuery(document).ready(function() { alert('Window height: ' + jQuery(window).height()); //retorna la altura del viewport alert('Window width: ' + jQuery(window).width()); // retorna el ancho del viewport }); |
Dimensiones del documento
1 2 3 4 | jQuery(document).ready(function() { alert('Document height: ' + jQuery(document).height()); //retorna la altura del documento alert('Document width: ' + jQuery(document).width()); //retorna el ancho del documento }); |
Como hemos visto, hemos utilizado el método ,height() y width() para determinar el tamaño tanto del documento como de la ventana, pero aplicados cada uno a su respectivo selector.
Te puede interesar
Elimina espacios en blanco con JQuery
Implementa Drag & Drop con jQuery
Un Editor WYSIWYG con jQuery