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

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

Para aquellos que no lo 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.

    Para obtener el ancho y alto 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() { }); 

    Puede probar unidades de ventana (CSS3):

     div { height: 95vh; width: 95vw; } 

    Soporte del navegador

    1. Respuesta a la pregunta principal

    El script $(window).height() funciona bien (muestra la altura de la $(window).height() 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 transicional:

    < !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 de tipo de documento, se resuelve satisfactoriamente, y estoy bastante seguro de que peps evitará el “cambio de desbordamiento de desplazamiento oculto y luego volver”, que es, lo siento, un truco sucio, especialmente si no lo haces t documentarlo en el código para uso futuro del progtwigdor.

    2. Un consejo ADICIONAL, nota aparte: Además, si está haciendo un guión, puede inventar pruebas para ayudar a los progtwigdores a usar sus bibliotecas, permítanme inventar un par:

    $ (document) .ready (function () {

      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, "Un consejo ADICIONAL, nota aparte": @Machiel, en el comentario de ayer (2014-09-04), fue TOTALMENTE correcto: el cheque de $ no puede estar dentro del evento listo de Jquery, porque estamos, como él señaló, suponiendo que $ ya está definido. GRACIAS POR SEÑALAR, y por favor el rest de ustedes lectores corrigen esto, si lo usaron en sus guiones. Mi sugerencia es: en sus bibliotecas ponga una función "install_script ()" que inicialice la biblioteca (ponga cualquier referencia a $ dentro de tal función init, incluyendo la statement de ready ()) y AL PRINCIPIO de dicha función "install_script ()" , compruebe si $ está definido, pero haga que todo sea independiente de JQuery, de modo que su biblioteca pueda "diagnosticarse a sí misma" cuando JQuery todavía 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 progtwigdores. Creo que las personas que crean bibliotecas deben ser más ricas en la retroalimentación a los posibles errores del progtwigdor. Por ejemplo, Google Apis necesita un manual aparte para comprender los mensajes de error. Eso es absurdo, para necesitar documentación externa para algunos pequeños errores que no necesitan que vaya y busque un manual o una especificación. La biblioteca debe ser AUTODETUMENTADA. Escribo código, incluso me ocupo de los errores que pueda cometer, incluso dentro de seis meses, y todavía trata de ser un código limpio y no repetitivo, ya escrito para prevenir futuros errores de desarrollador.

    Puede usar $ (ventana) .resize () para detectar si la ventana gráfica está redimensionada.

    jQuery no tiene ninguna función para detectar consistentemente el ancho y alto 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 ayude a cambiar el tamaño de un iframe al ancho de la ventana del 100% con un margen en cada lado, pero espero que brinde consuelo a los desarrolladores web frustrados por la incoherencia del navegador con el ancho y el alto de la ventana de JavaScript.

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

     $('iframe').css('width', '100%').wrap('
    ');

    [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 el alto correctos, pero recomendaría este método porque se basaría en el rastreo de agentes de usuario.

    Por lo general, los diferentes navegadores son inconsistentes sobre 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 utilizan el mismo navegador. Ver: https://github.com/eddiemachado/bones/issues/468#issuecomment-23626238

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

    Para obtener el tamaño de la ventana gráfica en carga y en 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() }); 
     function showViewPortSize(display) { if (display) { var height = window.innerHeight; var width = window.innerWidth; jQuery('body') .prepend('
    Height: ' + height + '
    Width: ' + width + '
    '); jQuery(window) .resize(function() { height = window.innerHeight; width = window.innerWidth; jQuery('#viewportsize') .html('Height: ' + height + '
    Width: ' + width); }); } } $(document) .ready(function() { showViewPortSize(true); });

    Para dispositivos móviles, use:

      screen.availWidth or screen.availHeight