Obtenha as dimensões da viewport do navegador com JavaScript

Eu quero fornecer aos meus visitantes a capacidade de ver imagens em alta qualidade, existe alguma maneira que eu possa detectar o tamanho da janela?

Ou melhor ainda, o tamanho da viewport do navegador com JavaScript? Veja a área verde aqui:

    Valores de @media (width) e @media (height) entre navegadores

     var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); 

    window.innerWidth e .innerHeight

    • Obtém viewport CSS @media (width) e @media (height) que incluem barras de rolagem
    • initial-scale variações de initial-scale e de zoom podem fazer com que os valores de dispositivos móveis sejam reduzidos incorretamente para o que o PPK chama de viewport visual e ser menor que os valores @media
    • o zoom pode fazer com que os valores sejam 1px desativados devido ao arredondamento nativo
    • undefined no IE8-

    document.documentElement.clientWidth e .clientHeight

    • é igual à largura da viewport do CSS menos a largura da barra de rolagem
    • corresponde @media (width) e @media (height) quando não barra de rolagem
    • mesmo que jQuery(window).width() que jQuery chama a viewport do navegador
    • navegador cruzado disponível
    • impreciso se o doctype estiver faltando

    Recursos

    • Saídas ao vivo para várias dimensões
    • beira usa técnicas de viewport cross-browser
    • usa real matchMedia para obter dimensões precisas em qualquer unidade

    funções de dimensão jQuery

    $(window).width() e $(window).height()

    Você pode usar as propriedades window.innerWidth e window.innerHeight .

    innerHeight vs outerHeight

    Se você não está usando o jQuery, fica feio. Aqui está um trecho que deve funcionar em todos os novos navegadores. O comportamento é diferente no modo Quirks e no modo de padrões no IE. Isso cuida disso.

     var elem = (document.compatMode === "CSS1Compat") ? document.documentElement : document.body; var height = elem.clientHeight; var width = elem.clientWidth; 

    Eu sei que isso tem uma resposta aceitável, mas me deparei com uma situação em que clientWidth não funcionava, já que o iPhone (pelo menos o meu) retornou 980, não 320, então usei window.screen.width . Eu estava trabalhando no site existente, tornando-me “responsivo” e precisava forçar navegadores maiores a usar uma meta-viewport diferente.

    Espero que isso ajude alguém, pode não ser perfeito, mas funciona nos meus testes em iOs e Android.

     //sweet hack to set meta viewport for desktop sites squeezing down to mobile that are big and have a fixed width //first see if they have window.screen.width avail (function() { if (window.screen.width) { var setViewport = { //smaller devices phone: 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no', //bigger ones, be sure to set width to the needed and likely hardcoded width of your site at large breakpoints other: 'width=1045,user-scalable=yes', //current browser width widthDevice: window.screen.width, //your css breakpoint for mobile, etc. non-mobile first widthMin: 560, //add the tag based on above vars and environment setMeta: function () { var params = (this.widthDevice < = this.widthMin) ? this.phone : this.other; var head = document.getElementsByTagName("head")[0]; var viewport = document.createElement('meta'); viewport.setAttribute('name','viewport'); viewport.setAttribute('content',params); head.appendChild(viewport); } } //call it setViewport.setMeta(); } }).call(this); 

    Consegui encontrar uma resposta definitiva em JavaScript: The Definitive Guide, 6th Edition por O’Reilly, p. 391:

    Essa solução funciona mesmo no modo Quirks, enquanto a solução atual de ryanve e ScottEvernden não funciona.

     function getViewportSize(w) { // Use the specified window or the current window if no argument w = w || window; // This works for all browsers except IE8 and before if (w.innerWidth != null) return { w: w.innerWidth, h: w.innerHeight }; // For IE (or any browser) in Standards mode var d = w.document; if (document.compatMode == "CSS1Compat") return { w: d.documentElement.clientWidth, h: d.documentElement.clientHeight }; // For browsers in Quirks mode return { w: d.body.clientWidth, h: d.body.clientHeight }; } 

    exceto pelo fato de que eu me pergunto por que a linha if (document.compatMode == "CSS1Compat") não é if (d.compatMode == "CSS1Compat") , tudo parece ser bom.

    Existe uma diferença entre window.innerHeight e document.documentElement.clientHeight . O primeiro inclui a altura da barra de rolagem horizontal.

    Eu olhei e encontrei um caminho cross-browser:

     function myFunction(){ if(window.innerWidth !== undefined && window.innerHeight !== undefined) { var w = window.innerWidth; var h = window.innerHeight; } else { var w = document.documentElement.clientWidth; var h = document.documentElement.clientHeight; } var txt = "Page size: width=" + w + ", height=" + h; document.getElementById("demo").innerHTML = txt; } 
     < !DOCTYPE html>   

    Try to resize the page.

     

    Este código é de http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

     function viewport() { var e = window, a = 'inner'; if (!('innerWidth' in window )) { a = 'client'; e = document.documentElement || document.body; } return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }; } 

    Nota: para ler a largura, use console.log('viewport width'+viewport().width);

    Se você está procurando uma solução não-jQuery que forneça valores corretos em pixels virtuais em dispositivos móveis , e você acha que window.innerHeight simples ou document.documentElement.clientHeight pode resolver seu problema, por favor estude este link primeiro: http: // tripleodeon. com / wp-content / uploads / 2011/12 / table.html

    O desenvolvedor fez um bom teste que revela o problema: você pode obter valores inesperados para canvass Android / iOS, paisagem / retrato, normal / alta densidade.

    Minha resposta atual ainda não é silver bullet (// todo), mas sim um aviso para aqueles que vão copiar e colar rapidamente qualquer solução desse thread para o código de produção.

    Eu estava procurando por largura de página em pixels virtuais no celular, e descobri que o único código de trabalho é (inesperadamente!) window.outerWidth . Mais tarde, vou examinar esta tabela para a solução correta dando altura, excluindo a barra de navegação, quando eu tiver tempo.

    Uma solução que esteja em conformidade com os padrões do W3C seria criar um div transparente (por exemplo, dinamicamente com JavaScript), definir sua largura e altura como 100vw / 100vh (unidades do viewport) e, em seguida, obter seu offsetWidth e offsetHeight. Depois disso, o elemento pode ser removido novamente. Isso não funcionará em navegadores mais antigos porque as unidades de porta de visualização são relativamente novas, mas se você não se preocupa com elas, e sim com os padrões (prestes a ser), você poderia definitivamente seguir este caminho:

     var objNode = document.createElement("div"); objNode.style.width = "100vw"; objNode.style.height = "100vh"; document.body.appendChild(objNode); var intViewportWidth = objNode.offsetWidth; var intViewportHeight = objNode.offsetHeight; document.body.removeChild(objNode); 

    Claro, você também pode definir objNode.style.position = “fixed” e, em seguida, usar 100% como largura / altura – isso deve ter o mesmo efeito e melhorar a compatibilidade até certo ponto. Além disso, definir a posição como fixa pode ser uma boa idéia em geral, porque senão a div ficará invisível, mas consumirá algum espaço, o que levará a barras de rolagem aparecendo etc.

    Esta é a maneira que eu faço, eu tentei no IE 8 -> 10, FF 35, Chrome 40, vai funcionar muito bem em todos os navegadores modernos (como window.innerWidth é definido) e no IE 8 (sem janela. innerWidth) funciona bem também, qualquer problema (como piscar por causa do estouro: “oculto”), por favor denuncie. Não estou realmente interessado na altura da janela de visualização, pois fiz essa function apenas para solucionar algumas ferramentas responsivas, mas ela pode ser implementada. Espero que ajude, agradeço comentários e sugestões.

     function viewportWidth () { if (window.innerWidth) return window.innerWidth; var doc = document, html = doc && doc.documentElement, body = doc && (doc.body || doc.getElementsByTagName("body")[0]), getWidth = function (elm) { if (!elm) return 0; var setOverflow = function (style, value) { var oldValue = style.overflow; style.overflow = value; return oldValue || ""; }, style = elm.style, oldValue = setOverflow(style, "hidden"), width = elm.clientWidth || 0; setOverflow(style, oldValue); return width; }; return Math.max( getWidth(html), getWidth(body) ); }