Usando jQuery para obtener el tamaño de la ventana gráfica

308

¿Cómo uso jQuery para determinar el tamaño de la ventana gráfica del navegador y volver a detectar esto si la página cambia de tamaño? Necesito hacer un tamaño de IFRAME en este espacio (llegando un poco en cada margen).

Para aquellos que no saben, la ventana gráfica del navegador no es del tamaño del documento / página. Es el tamaño visible de su ventana antes del desplazamiento.

jquery resize size viewport Volomike
fuente
¿Alguna idea de cómo obtener el área que es visible en la pantalla de los dispositivos, no solo a qué se puede desplazar? Veo que $ (ventana) .height () devuelve el ancho completo del documento, no la parte a la que se hace zoom. Quiero saber cuánto es visible después de aplicar el zoom.
Frank Schwieterman el
appelsiini.net/projects/viewport ¡ Esto debería hacerlo! :)
Mackelito
1
Esta no es una respuesta directa a la pregunta, pero puede ser útil para aquellos que desean manipular selectores de acuerdo con su posición y visibilidad en relación con la ventana gráfica : appelsiini.net/projects/viewport (plugin)
Wallace Sidhrée

Respuestas:

484

Para obtener el ancho y la altura de la ventana gráfica:

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

cambiar el tamaño del evento de la página:

$(window).resize(function() {

});
SimaWB
fuente
18
Probé esto en Windows IE6, IE8, FF3.6.3, Google Chrome 5.0.375.70, Opera 10.53 y Safari 5.0 (7533.16). Esto funciona consistentemente en todos estos. También probé FF3.6.3 en Ubuntu y funciona allí también. Creo que estoy usando jQuery 1.3 con WordPress 2.9.2, que es donde necesitaba que esto funcione.
Volomike
48
¿Alguna idea de cómo obtener el área que es visible en la pantalla de los dispositivos, no solo a qué se puede desplazar? Veo que $ (ventana) .height () devuelve el ancho completo del documento, no la parte a la que se hace zoom. Quiero saber cuánto es visible después de aplicar el zoom.
Frank Schwieterman el
99
En realidad, innerWidth/ innerHeightes más correcto de usar (cubriendo el zoom).
18
@FrankSchwieterman Tal vez su navegador no se esté comportando de la manera que desea: tal vez se encuentre con este problema: stackoverflow.com/q/12103208/923560 . Asegúrese de que su archivo HTML incluya una DOCTYPEdeclaración adecuada , por ejemplo <!DOCTYPE html>.
Abdull
21
Esto está completamente mal. Esto le da el tamaño del documento, no la ventana gráfica (el tamaño de la ventana en el documento).
Mike Bethany
26

1. Respuesta a la pregunta principal.

El script $(window).height()funciona bien (muestra la altura de la ventana gráfica y no el documento con altura de desplazamiento), PERO necesita que coloque correctamente la etiqueta doctype en su documento, por ejemplo, estos doctypes:

Para HTML 5:

<!DOCTYPE html>

Para HTML4 de transición:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Probablemente el tipo de documento predeterminado asumido por algunos navegadores es tal, que $(window).height()toma la altura del documento y no la altura del navegador. Con la especificación doctype, se resuelve satisfactoriamente, y estoy bastante seguro de que los peps evitarán el "cambio de desbordamiento de desplazamiento a oculto y luego de regreso", que es, lo siento, un truco un poco sucio, especialmente si no lo hace ' t documentarlo en el código para el uso futuro del programador.

2. Un consejo ADICIONAL, tenga en cuenta: Además, si está haciendo un script, puede inventar pruebas para ayudar a los programadores a usar sus bibliotecas, permítame inventar un par:

$ (documento) .ready (función () {

      if(typeof $=='undefined') {
        alert("PROGRAMMER'S Error: you haven't called JQuery library");
      } else if (typeof $.ui=='undefined') {
        alert("PROGRAMMER'S Error: you haven't installed the UI Jquery library");
      }
      if(document.doctype==null || screen.height < parseInt($(window).height()) ) {
        alert("ERROR, check your doctype, the calculated heights are not what you might expect");
      }

});

EDITAR: sobre la parte 2, "Una sugerencia ADICIONAL, nota aparte": @Machiel, en el comentario de ayer (04/09/2014), estaba TOTALMENTE en lo cierto: el cheque de los $ no puede estar dentro del evento listo de Jquery, porque estamos, como señaló, asumiendo que $ ya está definido. Gracias por señalar eso, y por favor, el resto de ustedes lectores corrija esto, si lo usó en sus scripts. Mi sugerencia es: en sus bibliotecas, coloque una función "install_script ()" que inicialice la biblioteca (ponga cualquier referencia a $ dentro de dicha función init, incluida la declaración de ready ()) y AL COMIENZO de dicha función "install_script ()" , verifique si $ está definido, pero haga que todo sea independiente de JQuery, para que su biblioteca pueda "diagnosticarse a sí misma" cuando JQuery aún no esté definido. Prefiero este método en lugar de forzar la creación automática de un JQuery trayéndolo desde un CDN. Esas son pequeñas notas aparte para ayudar a otros programadores. Creo que las personas que crean bibliotecas deben ser más ricas en la retroalimentación a los posibles errores de los programadores. Por ejemplo, Google Apis necesita un manual aparte para comprender los mensajes de error. Eso es absurdo, necesitar documentación externa para algunos pequeños errores que no necesitan que busques un manual o una especificación. La biblioteca debe estar AUTODOCUMENTADA. Escribo código incluso teniendo en cuenta los errores que podría cometer incluso dentro de seis meses, y todavía trata de ser un código limpio y no repetitivo, ya escrito para evitar errores de desarrollador futuro. Creo que las personas que crean bibliotecas deben ser más ricas en la retroalimentación a los posibles errores de los programadores. Por ejemplo, Google Apis necesita un manual aparte para comprender los mensajes de error. Eso es absurdo, necesitar documentación externa para algunos pequeños errores que no necesitan que busques un manual o una especificación. La biblioteca debe estar AUTODOCUMENTADA. Escribo código incluso teniendo en cuenta los errores que podría cometer incluso dentro de seis meses, y todavía trata de ser un código limpio y no repetitivo, ya escrito para evitar errores de desarrollador futuro. Creo que las personas que crean bibliotecas deben ser más ricas en la retroalimentación a los posibles errores de los programadores. Por ejemplo, Google Apis necesita un manual aparte para comprender los mensajes de error. Eso es absurdo, necesitar documentación externa para algunos pequeños errores que no necesitan que busques un manual o una especificación. La biblioteca debe estar AUTODOCUMENTADA. Escribo código incluso teniendo en cuenta los errores que podría cometer incluso dentro de seis meses, y todavía trata de ser un código limpio y no repetitivo, ya escrito para evitar errores de desarrollador futuro. No es necesario que vaya y busque un manual o una especificación. La biblioteca debe estar AUTODOCUMENTADA. Escribo código incluso teniendo en cuenta los errores que podría cometer incluso dentro de seis meses, y todavía trata de ser un código limpio y no repetitivo, ya escrito para evitar errores de desarrollador futuro. No es necesario que vaya y busque un manual o una especificación. La biblioteca debe estar AUTODOCUMENTADA. Escribo código incluso teniendo en cuenta los errores que podría cometer incluso dentro de seis meses, y todavía trata de ser un código limpio y no repetitivo, ya escrito para evitar errores de desarrollador futuro.

David L
fuente
2
Es muy difícil leer tu publicación. Vuelva a hacer su publicación para que se acostumbre al StackExchange Markdown como todos los demás. Hay una razón por la cual los sitios de StackExchange no usan TinyMCE , pero si tiene alguna queja, participe en el Meta .
Volomike
Es un poco extraño que verifique la disponibilidad $después de que ya haya utilizado la $llamada $(document).ready(function() { } );. Es bueno si verifica si jQuery está disponible, pero en este punto ya es demasiado tarde.
Machiel
@Machiel, tienes toda la razón. Afortunadamente, solo fui a revisar mis scripts, y no usan el evento ready. Sí, gracias, me sentí estúpido cuando dijiste esto, pero afortunadamente acabo de comprobar que en mis scripts la comprobación está dentro de una función llamada "install_this_script ()", y en dicha instalación llamo a la función init de la biblioteca, pero antes de eso, verifico (OUTSIDE JQUERY) si el objeto $ está definido o no. Gracias de todas formas, hermano, ¡realmente me asustaste! Me temo que esta publicación estuvo aquí demasiado tiempo, espero que este error no haya hecho mucho daño a los otros lectores. He corregido la publicación.
David L
¡Esta debería ser la verdadera respuesta! ¡Gracias!
Justin T. Watts
6

Puede usar $ (window) .resize () para detectar si la ventana gráfica cambia de tamaño.

jQuery no tiene ninguna función para detectar consistentemente el ancho y la altura correctos de la ventana gráfica [1] cuando hay una barra de desplazamiento presente.

Encontré una solución que usa la biblioteca Modernizr y específicamente la función mq que abre consultas de medios para javascript.

Aquí está mi solución:

// A function for detecting the viewport minimum width.
// You could use a similar function for minimum height if you wish.
var min_width;
if (Modernizr.mq('(min-width: 0px)')) {
    // Browsers that support media queries
    min_width = function (width) {
        return Modernizr.mq('(min-width: ' + width + ')');
    };
}
else {
    // Fallback for browsers that does not support media queries
    min_width = function (width) {
        return $(window).width() >= width;
    };
}

var resize = function() {
    if (min_width('768px')) {
        // Do some magic
    }
};

$(window).resize(resize);
resize();

Mi respuesta probablemente no ayudará a cambiar el tamaño de un iframe al 100% del ancho de la ventana gráfica con un margen a cada lado, pero espero que brinde consuelo a los desarrolladores web frustrados con la incoherencia del navegador del cálculo del ancho y la altura de la ventana gráfica de JavaScript.

Tal vez esto podría ayudar con respecto al iframe:

$('iframe').css('width', '100%').wrap('<div style="margin:2em"></div>');

[1] Puede usar $ (ventana) .width () y $ (ventana) .height () para obtener un número que será correcto en algunos navegadores, pero incorrecto en otros. En esos navegadores, puede intentar usar window.innerWidth y window.innerHeight para obtener el ancho y la altura correctos, pero recomendaría este método porque dependería de la detección de agentes de usuario.

Por lo general, los diferentes navegadores son inconsistentes acerca de si incluyen o no la barra de desplazamiento como parte del ancho y alto de la ventana.

Nota: Tanto $ (window) .width () como window.innerWidth varían entre los sistemas operativos que usan el mismo navegador. Ver: https://github.com/eddiemachado/bones/issues/468#issuecomment-23626238

forsvunnet
fuente
4 
function showViewPortSize(display) {
    if (display) {
        var height = window.innerHeight;
        var width = window.innerWidth;
        jQuery('body')
            .prepend('<div id="viewportsize" style="z-index:9999;position:fixed;bottom:0px;left:0px;color:#fff;background:#000;padding:10px">Height: ' + height + '<br>Width: ' + width + '</div>');
        jQuery(window)
            .resize(function() {
                height = window.innerHeight;
                width = window.innerWidth;
                jQuery('#viewportsize')
                    .html('Height: ' + height + '<br>Width: ' + width);
            });
    }
}
$(document)
    .ready(function() {
        showViewPortSize(true);
    });
AnuRaj
fuente
El uso de $ (window) .height () no le dará el tamaño de la ventana gráfica, le dará el tamaño de toda la ventana, que generalmente es el tamaño de todo el documento, aunque el documento podría ser aún más grande.
AnuRaj
genial para el ancho!
Marc
2

Para obtener el tamaño de la ventana gráfica al cargar y cambiar el tamaño (según la respuesta de SimaWB):

function getViewport() {
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();
    $('#viewport').html('Viewport: '+viewportWidth+' x '+viewportHeight+' px');
}

getViewport();

$(window).resize(function() {
    getViewport()
});
SandroMarques
fuente
1

Tenga en cuenta que las unidades de ventana gráfica CSS3 (vh, vw) no funcionarían bien en iOS Cuando se desplaza la página, el tamaño de la ventana gráfica se recalcula de alguna manera y el tamaño del elemento que usa unidades de ventana gráfica también aumenta. Por lo tanto, en realidad se requiere JavaScript.

DAH
fuente