Obter a altura e largura da janela de visualização do navegador sem barras de rolagem usando jquery?

Como obtenho a altura e a largura da janela de visualização do navegador sem barras de rolagem usando jQuery?

Aqui está o que tentei até agora:

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

Esta solução não leva em consideração as barras de rolagem do navegador.

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

Mais informações

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

Usar jQuery não é essencial para obter esses valores, no entanto. Usar

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

para obter tamanhos, excluindo barras de rolagem, ou

window.innerHeight;
window.innerWidth;

para obter toda a janela de visualização, incluindo barras de rolagem.

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

Não use jQuery, apenas use javascript para o resultado correto:

Isso inclui largura / altura da barra de rolagem:

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

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

Isso exclui a largura / altura da barra de rolagem:

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

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

Aqui está um JS genérico que deve funcionar na maioria dos 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;
}

Você está usando as chamadas de método incorretas. Uma janela de visualização é a "janela" que se abre no documento: quanto você pode ver e onde.

Usar $(window).height()não fornecerá o tamanho da janela de visualização, mas sim o tamanho da janela inteira, que normalmente é o tamanho do documento inteiro, embora o documento possa ser ainda maior.

Para obter o tamanho do visor real, use window.innerHeighte window.innerWidth.

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

Não use os métodos jQuery, por exemplo $(window).innerHeight(), pois eles fornecem números errados. Eles fornecem a altura da janela, não innerHeight.

Descrição

O seguinte fornecerá o tamanho da janela de visualização do navegador.

Amostra

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

Mais Informações

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

Como Kyle sugeriu, você pode medir o tamanho da janela de visualização do navegador do cliente sem levar em conta o tamanho das barras de rolagem dessa forma.

Amostra (dimensões da viewport SEM barras de rolagem)

// 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, se você deseja encontrar as dimensões da janela de visualização do cliente, levando em consideração o tamanho das barras de rolagem, então este exemplo abaixo é o mais adequado para você.

Primeiro, não se esqueça de definir sua tag de corpo para ter 100% de largura e altura apenas para ter certeza de que a medição é 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.
}

Amostra (dimensões da viewport COM barras de rolagem)

// 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');

O script $(window).height()funciona bem (mostrando a altura da janela de visualização e não o documento com altura de rolagem), MAS ele precisa que você coloque corretamente a tag doctype em seu documento, por exemplo, estes doctypes:

Para html5: <!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">

Provavelmente o doctype padrão assumido por alguns navegadores é tal, que $(window).height()leva a altura do documento e não a altura do navegador. Com a especificação doctype, é resolvido de forma satisfatória, e tenho certeza que seus peps evitarão "alterar o estouro de rolagem para oculto e depois de volta", o que é, desculpe, um truque um tanto sujo, especialmente se você não t documente no código para uso futuro do programador.

Além disso, se você está fazendo um script, pode inventar testes para ajudar os programadores em suas bibliotecas, deixe-me inventar alguns:

$(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 () retornará os mesmos valores ... a chave é redefinir o preenchimento e a margem do corpo para que você não obtenha rolagem.

<!--

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

-->

Espero que isto ajude.

Eu queria um visual diferente do meu site para tela larga e tela pequena. Fiz 2 arquivos CSS. Em Java eu ​​escolho qual dos 2 arquivos CSS é usado, dependendo da largura da tela. Eu uso a função PHP echocom na echofunção-algum javascript.

meu código na <header>seção do meu arquivo 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>
"; 
?>