¿Obtener la altura y el ancho de la ventana gráfica del navegador sin barras de desplazamiento usando jquery?

¿Cómo obtengo la altura y el ancho de la ventana gráfica del navegador sin barras de desplazamiento usando jQuery?

Esto es lo que he probado hasta ahora:

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

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

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

Más información

• http://api.jquery.com/height/
• http://api.jquery.com/width/

Sin embargo, usar jQuery no es esencial para obtener esos valores. Utilizar

document.documentElement.clientHeight;
document.documentElement.clientWidth;

para obtener tamaños excluyendo las barras de desplazamiento, o

window.innerHeight;
window.innerWidth;

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

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

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

Esto incluye el ancho / alto de la barra de desplazamiento:

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

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

Esto excluye el ancho / alto de la barra de desplazamiento:

var widthWithoutScrollbar = document.body.clientWidth;
var heightWithoutScrollbar = document.body.clientHeight;

alert('viewport width is: '+ widthWithoutScrollbar + ' and viewport height is:' + heightWithoutScrollbar);

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

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

El uso $(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.

Para obtener el tamaño de la ventana gráfica real, utilice window.innerHeighty window.innerWidth.

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

No utilice los métodos jQuery, por ejemplo $(window).innerHeight(), ya que dan números incorrectos. Te dan la altura de la ventana, no innerHeight.

Descripción

Lo siguiente le dará el tamaño de la ventana gráfica del navegador.

Muestra

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

Más información

• jQuery.height ()
• jQUery.width ()

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

Muestra (dimensiones de la ventana gráfica 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, esta muestra a continuación se adapta mejor a sus necesidades.

Primero, no olvide configurar la etiqueta de su cuerpo para que sea 100% de ancho y alto solo para asegurarse de que la medida 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 ventana gráfica 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');

La secuencia de comandos $(window).height() funciona bien (muestra la altura de la ventana gráfica y no el documento con la altura de desplazamiento), PERO necesita que coloques correctamente la etiqueta doctype en tu 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 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 ustedes evitarán "cambiar el desbordamiento de desplazamiento a oculto y luego volver", que es, lo siento, un truco un poco sucio, especialmente si no lo hace. t documentarlo en el código para uso futuro del programador.

Además, si está haciendo un script, puede inventar pruebas para ayudar a los programadores en sus bibliotecas, permítame inventarme 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");
    } 
});

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

});

Usando jQuery ...

$ (document) .height () & $ (window) .height () devolverán los mismos valores ... la clave es restablecer el relleno y el margen del cuerpo para que no tenga desplazamiento.

<!--

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

-->

Espero que esto ayude.

Quería un aspecto diferente de mi sitio web para pantalla ancha y pantalla pequeña. He creado 2 archivos CSS. En Java, elijo cuál de los 2 archivos CSS se usa según el ancho de la pantalla. Yo uso la función PHP echocon en elecho función algo de javascript.

mi código en la <header>sección de mi archivo PHP:

<?php
echo "
<script>
    if ( window.innerWidth > 400)
            { document.write('<link href=\"kekemba_resort_stylesheetblog-jun2018.css\" rel=\"stylesheet\" type=\"text/css\">'); }
    else
            { document.write('<link href=\"kekemba_resort_stylesheetblog-jun2018small.css\" rel=\"stylesheet\" type=\"text/css\">'); }
</script>
"; 
?>