Pregunta Obtenga el alto y ancho de la ventana del navegador sin barras de desplazamiento usando jquery?


¿Cómo obtengo el alto y ancho de la ventana del navegador sin barras de desplazamiento usando jQuery?

Esto es lo que he intentado hasta ahora:

       var viewportWidth = $("body").innerWidth();
       var viewportHeight = $("body").innerHeight();

Esta solución no tiene en cuenta las barras de desplazamiento del navegador.


73
2018-01-09 19:56


origen


Respuestas:


$(window).height();
$(window).width();

Más información

Sin embargo, el uso de jQuery no es esencial para obtener esos valores. Utilizar

document.body.clientHeight;
document.body.clientWidth;

para obtener tamaños sin incluir barras de desplazamiento, o

window.innerHeight;
window.innerWidth;

para obtener toda la ventana gráfica, incluidas las barras de desplazamiento.

document.body.clientHeight <= window.innerHeight;  // is always true

119
2018-01-09 19:58



No use jQuery, solo use javascript para obtener el resultado correcto:

var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

alert('viewport width is: '+ windowWidth + ' and viewport height is:' + windowHeight);


23
2018-01-26 06:55



Aquí hay un JS genérico que debería funcionar en la mayoría de los navegadores (FF, Cr, IE6 +):

var viewportHeight;
var viewportWidth;
if (document.compatMode === 'BackCompat') {
    viewportHeight = document.body.clientHeight;
    viewportWidth = document.body.clientWidth;
} else {
    viewportHeight = document.documentElement.clientHeight;
    viewportWidth = document.documentElement.clientWidth;
}

22
2017-09-26 09:17



Estás utilizando las llamadas al método incorrecto. Una ventana gráfica es la "ventana" que está abierta en el documento: cuánto de ella puede ver y dónde.

Utilizando $(window).height() no le dará el tamaño de la vista, le dará el tamaño de la ventana completa, que suele ser del tamaño de todo el documento, aunque el documento podría ser aún más grande.

Para obtener el tamaño del uso real de la ventana gráfica window.innerHeight y window.innerWidth.

https://gist.github.com/bohman/1351439

No use los métodos jQuery, p. $(window).innerHeight(), ya que estos dan los números equivocados. Te dan la altura de la ventana, no innerHeight.


11
2018-01-22 19:18



Descripción

Lo siguiente le dará el tamaño de la vista de los navegadores.

Muestra

$(window).height();   // returns height of browser viewport
$(window).width();   // returns width of browser viewport

Más información


7
2018-01-09 19:57



Como sugirió Kyle, puede medir el tamaño de la ventana del navegador del cliente sin tener en cuenta el tamaño de las barras de desplazamiento de esta manera.

Muestra (dimensiones de la vista SIN barras de desplazamiento)

// First you forcibly request the scroll bars to hidden regardless if they will be needed or not.
$('body').css('overflow', 'hidden');

// Take your measures.
// (These measures WILL NOT take into account scroll bars dimensions)
var heightNoScrollBars = $(window).height();
var widthNoScrollBars = $(window).width();

// Set the overflow css property back to it's original value (default is auto)
$('body').css('overflow', 'auto');

Alternativamente, si desea encontrar las dimensiones de la ventana gráfica del cliente teniendo en cuenta el tamaño de las barras de desplazamiento, entonces este ejemplo de muestra se adapta mejor a usted.

Primero, no olvide configurar su etiqueta corporal para que sea del 100% de ancho y alto solo para asegurarse de que la medición sea precisa.

body { 
width: 100%; // if you wish to measure the width and take into account the horizontal scroll bar.
height: 100%; // if you wish to measure the height while taking into account the vertical scroll bar.
}

Muestra (dimensiones de la vista con barras de desplazamiento)

// First you forcibly request the scroll bars to be shown regardless if they will be needed or not.
$('body').css('overflow', 'scroll');

// Take your measures.
// (These measures WILL take into account scroll bars dimensions)
var heightWithScrollBars = $(window).height();
var widthWithScrollBars = $(window).width();

// Set the overflow css property back to it's original value (default is auto)
$('body').css('overflow', 'auto');

6
2017-09-08 19:14



La secuencia de comandos $(window).height() funciona bien (mostrando la altura de la ventana gráfica 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 html5: <!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 doctype 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 programador.

Además, si está haciendo un guión, puede inventar pruebas para ayudar a los programadores en sus bibliotecas, permítanme inventar un par:

$(document).ready(function() {
    if(typeof $=='undefined') {
        alert("Error, you haven't called 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");
    } 
});

4
2018-03-06 15:59



$(document).ready(function() {

  //calculate the window height & add css properties for height 100%

  wh = $( window ).height();

  ww = $( window ).width();

  $(".targeted-div").css({"height": wh, "width": ww});

});

3
2017-10-14 14:21



Usando jQuery ...

$ (documento) .height () y $ (ventana) .height () devolverán los mismos valores ... la clave es restablecer el margen y el margen del cuerpo para que no tenga que desplazarse.

<!--

body {
    padding: 0px;
    margin: 0px;
    position: relative;
}

-->

Espero que esto ayude.


0
2018-04-27 07:43