Usando o jQuery para obter o tamanho da viewport

308

Como uso o jQuery para determinar o tamanho da janela de exibição do navegador e redetectá-la se a página é redimensionada? Eu preciso fazer um tamanho IFRAME nesse espaço (entrando um pouco em cada margem).

Para quem não sabe, a janela de exibição do navegador não é do tamanho do documento / página. É o tamanho visível da sua janela antes da rolagem.

jquery resize size viewport Volomike
fonte
Alguma idéia de como obter a área visível na tela dos dispositivos, e não apenas para o que ela pode rolar? Vejo $ (window) .height () retornando toda a largura do documento, não a parte que é ampliada. Quero saber quanto é visível após a aplicação do zoom.
22811 Frank Schwieterman
appelsiini.net/projects/viewport Isso deve ser feito! :)
Mackelito 9/03/12
1
Esta não é uma resposta direta à pergunta, mas pode ser útil para aqueles que querem manipular seletores de acordo com sua posição e visibilidade em relação ao visor: appelsiini.net/projects/viewport (plugin)
Wallace Sidhrée

Respostas:

484

Para obter a largura e a altura da janela de exibição:

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

redimensionar evento da página:

$(window).resize(function() {

});
SimaWB
fonte
18
Testei isso no Windows IE6, IE8, FF3.6.3, Google Chrome 5.0.375.70, Opera 10.53 e Safari 5.0 (7533.16). Isso funciona consistentemente em tudo isso. Também testei o FF3.6.3 no Ubuntu e funciona lá também. Acho que estou usando o jQuery 1.3 com o WordPress 2.9.2, que é onde eu precisava disso para funcionar.
Volomike
48
Alguma idéia de como obter a área visível na tela dos dispositivos, e não apenas para o que ela pode rolar? Vejo $ (window) .height () retornando a largura total do documento, não a parte que é ampliada. Quero saber quanto é visível após a aplicação do zoom.
22811 Frank Schwieterman
9
Na verdade, innerWidth/ innerHeighté mais correto de usar (cobrindo o zoom).
18
@FrankSchwieterman Talvez o seu navegador não esteja se comportando da maneira que você deseja: talvez você esteja enfrentando esse problema: stackoverflow.com/q/12103208/923560 . Verifique se o seu arquivo HTML inclui uma DOCTYPEdeclaração adequada , por exemplo <!DOCTYPE html>.
Abdull
21
Isso está completamente errado. Isso fornece o tamanho do documento, não a janela de exibição (o tamanho da janela no documento).
Mike Betânia
26

1. Resposta à questão principal

O script $(window).height()funciona bem (mostrando a altura da janela de exibição e não o documento com altura de rolagem), mas é necessário que você coloque corretamente a tag doctype no seu documento, por exemplo, estes doctypes:

Para HTML 5:

<!DOCTYPE html>

Para HTML4 de transição:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Provavelmente, o tipo de documento 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, ela é resolvida de maneira satisfatória e tenho certeza de que as pessoas evitarão a "alteração do deslocamento de rolagem para oculto e depois para trás", o que é, desculpe, um truque sujo, especialmente se você não Não o documente no código para uso futuro do programador.

2. Uma dica adicional, observe o seguinte: Além disso, se você estiver criando um script, poderá inventar testes para ajudar os programadores a usar suas bibliotecas, deixe-me inventar algumas:

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

});

EDIT: sobre a parte 2, "Uma dica adicional, observe o lado": @Machiel, no comentário de ontem (04/09/2014), estava UTTERLY certo: a verificação do $ não pode estar dentro do evento ready do Jquery, porque como ele apontou, estamos assumindo que $ já está definido. Obrigado por apontar isso e, por favor, o restante de vocês corrige isso, se você o usou em seus scripts. Minha sugestão é: em suas bibliotecas, coloque uma função "install_script ()" que inicialize a biblioteca (coloque qualquer referência a $ dentro dessa função init, incluindo a declaração de ready ()) e NO INÍCIO dessa função "install_script ()" , verifique se $ está definido, mas torne tudo independente do JQuery, para que sua biblioteca possa "diagnosticar-se" quando o JQuery ainda não estiver definido. Prefiro esse método ao invés de forçar a criação automática de um JQuery trazendo-o de uma CDN. Essas são pequenas notas de lado para ajudar outros programadores. Eu acho que as pessoas que criam bibliotecas devem ser mais ricas no feedback dos possíveis erros do programador. Por exemplo, o Google Apis precisa de um manual para entender as mensagens de erro. Isso é um absurdo, precisar de documentação externa para alguns pequenos erros que não precisam que você procure um manual ou uma especificação. A biblioteca deve ser AUTO-DOCUMENTADA. Eu escrevo código mesmo cuidando dos erros que eu possa cometer daqui a seis meses, e ele ainda tenta ser um código limpo e não repetitivo, já escrito para evitar futuros erros de desenvolvedor. Eu acho que as pessoas que criam bibliotecas devem ser mais ricas no feedback dos possíveis erros do programador. Por exemplo, o Google Apis precisa de um manual para entender as mensagens de erro. Isso é um absurdo, precisar de documentação externa para alguns pequenos erros que não precisam que você procure um manual ou uma especificação. A biblioteca deve ser AUTO-DOCUMENTADA. Eu escrevo código mesmo cuidando dos erros que eu possa cometer daqui a seis meses, e ele ainda tenta ser um código limpo e não repetitivo, já escrito para evitar futuros erros de desenvolvedor. Eu acho que as pessoas que criam bibliotecas devem ser mais ricas no feedback sobre os erros potenciais do programador. Por exemplo, o Google Apis precisa de um manual para entender as mensagens de erro. Isso é um absurdo, precisar de documentação externa para alguns pequenos erros que não precisam que você procure um manual ou uma especificação. A biblioteca deve ser AUTO-DOCUMENTADA. Eu escrevo código mesmo cuidando dos erros que eu possa cometer daqui a seis meses, e ele ainda tenta ser um código limpo e não repetitivo, já escrito para evitar futuros erros de desenvolvedor. você não precisa procurar um manual ou uma especificação. A biblioteca deve ser AUTO-DOCUMENTADA. Eu escrevo código mesmo cuidando dos erros que eu possa cometer daqui a seis meses, e ele ainda tenta ser um código limpo e não repetitivo, já escrito para evitar futuros erros de desenvolvedor. você não precisa procurar um manual ou uma especificação. A biblioteca deve ser AUTO-DOCUMENTADA. Eu escrevo código mesmo cuidando dos erros que eu possa cometer daqui a seis meses, e ele ainda tenta ser um código limpo e não repetitivo, já escrito para evitar futuros erros de desenvolvedor.

David L
fonte
2
É muito difícil ler sua postagem. Refaça sua postagem para que você se acostume ao Markdown StackExchange como todos os outros. Há uma razão pela qual os sites StackExchange não usam o TinyMCE , mas se você tiver uma queixa, envolva-se no Meta .
Volomike
É um pouco estranho verificar a disponibilidade $depois que você já usou a $chamada $(document).ready(function() { } );. É bom verificar se o jQuery está disponível, mas neste momento já é tarde demais.
Machiel
@Machiel, você está certo. Felizmente, fui verificar meus scripts e eles não usam o evento ready. Sim, obrigado, me senti estúpido quando você disse isso, mas felizmente acabei de verificar que, nos meus scripts, a verificação está dentro de uma função chamada "install_this_script ()", e nessa instalação eu chamo a função init da biblioteca, mas antes disso, verifico (OUTSIDE JQUERY) se o objeto $ está definido ou não. OBRIGADO DE QUALQUER MANEIRA, mano, você realmente me assustou! Receio que este post esteja aqui por muito tempo, espero que esse erro não tenha causado muitos danos aos outros leitores. Corrigi a postagem.
David L
Esta deve ser a resposta real! Obrigado!
Justin T. Watts
6

Você pode usar $ (window) .resize () para detectar se a viewport é redimensionada.

O jQuery não possui nenhuma função para detectar consistentemente a largura e altura corretas da janela de exibição [1] quando houver uma barra de rolagem presente.

Encontrei uma solução que usa a biblioteca Modernizr e, especificamente, a função mq, que abre consultas de mídia para javascript.

Aqui está a minha solução:

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

Minha resposta provavelmente não ajudará a redimensionar um iframe para 100% de largura da janela de visualização com uma margem de cada lado, mas espero que isso forneça consolo para desenvolvedores da Web frustrados com a incoerência do navegador no cálculo da largura e altura da janela de visualização javascript.

Talvez isso possa ajudar com relação ao iframe:

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

[1] Você pode usar $ (window) .width () e $ (window) .height () para obter um número que será correto em alguns navegadores, mas incorreto em outros. Nesses navegadores, você pode tentar usar o window.innerWidth e o window.innerHeight para obter a largura e a altura corretas, mas eu recomendaria esse método, porque ele dependeria do sniffing do agente do usuário.

Geralmente, os diferentes navegadores são inconsistentes quanto à inclusão ou não da barra de rolagem como parte da largura e altura da janela.

Nota: $ (window) .width () e window.innerWidth variam entre os sistemas operacionais usando o mesmo navegador. Consulte: https://github.com/eddiemachado/bones/issues/468#issuecomment-23626238

forsvunnet
fonte
4 
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);
    });
AnuRaj
fonte
Usar $ (window) .height () não fornecerá o tamanho da janela de exibição, mas o tamanho de toda a janela, que geralmente é o tamanho de todo o documento, embora o documento possa ser ainda maior.
AnuRaj
ótimo para largura!
Marc
2

Para obter o tamanho da viewport no carregamento e no redimensionamento (com base na resposta do SimaWB):

function getViewport() {
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();
    $('#viewport').html('Viewport: '+viewportWidth+' x '+viewportHeight+' px');
}

getViewport();

$(window).resize(function() {
    getViewport()
});
SandroMarques
fonte
1

Observe que as unidades de viewport CSS3 (vh, vw) não funcionam bem no iOS Quando você rola a página, o tamanho da viewport é de alguma forma recalculado e seu tamanho do elemento que usa as unidades de viewport também aumenta. Então, na verdade, é necessário algum javascript.

DAH
fonte