examples - Usando jQuery para obtener el tamaño de Viewport

resizable iframe jquery

Question

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

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

Answer 1

Para móviles, use:

    screen.availWidth or screen.availHeight

Answer 2

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

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

redimensionar evento de la página:

$(window).resize(function() {

});

Answer 3

Para obtener el tamaño de la ventana gráfica en la carga y en el tamaño (en función de 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()
});

Answer 4

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

jQuery no tiene ninguna función para detectar constantemente el ancho y el alto 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();

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

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

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

[1] Puedes usar $ (window) .width () y $ (window) .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 del agente 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 usan el mismo navegador. Consulte: https://github.com/eddiemachado/bones/issues/468#issuecomment-23626238

Answer 5

Puedes probar las unidades de viewport (CSS3):

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

Soporte del navegador

Answer 6

Tenga en cuenta que las unidades de ventana de visualización CSS3 (vh, vw) no funcionarán bien en iOS. Cuando se desplaza por la página, el tamaño de la ventana gráfica se vuelve a calcular y el tamaño del elemento que utiliza las unidades de ventana gráfica también aumenta. Por lo tanto, en realidad se requiere algún javascript.

Answer 7

1. Respuesta a la pregunta principal.

El script $(window).height() funciona bien (muestra la altura de la $(window).height() y no el documento con la 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 resolvió satisfactoriamente, y estoy bastante seguro de que peps evitará "cambiar el desbordamiento de desplazamiento a oculto y luego volver", que es, lo siento, un truco sucio, especialmente si no lo hace. t documéntelo en el código para el uso futuro del programador.

2. Una sugerencia ADICIONAL, nota aparte: Además, si estás haciendo un script, puedes inventar pruebas para ayudar a los programadores a usar tus bibliotecas, déjame 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");
      } 

});

EDICIÓN: acerca de la parte 2, "Un consejo ADICIONAL, nota aparte": @Machiel, en el comentario de ayer (2014-09-04), estuvo TOTALMENTE en lo correcto: el cheque de los $ no puede estar dentro del evento listo de Jquery, porque estamos, como él señaló, asumiendo que $ ya está definido. GRACIAS POR LO QUE SEÑALA, y por favor, el resto de ustedes, lectores, corrijan esto, si lo usaron en sus scripts. Mi sugerencia es: en sus bibliotecas, coloque una función "install_script ()" que inicializa la biblioteca (ponga cualquier referencia a $ dentro de dicha función init, incluida la declaración de ready ()) Y AL INICIO de dicha función "install_script ()" , compruebe si el $ 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 que lo trae desde un CDN. Esas son pequeñas notas aparte para ayudar a otros programadores. Creo que las personas que hacen bibliotecas deben ser más ricas en los comentarios sobre los posibles errores de los programadores. Por ejemplo, Google Apis necesita un manual aparte para comprender los mensajes de error. Es absurdo, necesitar documentación externa para algunos pequeños errores que no requieren que vaya a buscar un manual o una especificación. La biblioteca debe ser autodocumentada. Escribo el código, incluso cuidando los errores que podría cometer incluso dentro de seis meses, y todavía intenta ser un código limpio y no repetitivo, ya escrito para prevenir futuros errores de los desarrolladores.

Answer 8

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);
    });