Como detectar a resolução da tela com JavaScript?

Existe uma maneira que funcione para todos os navegadores?

resposta original

Sim.

window.screen.availHeight
window.screen.availWidth

update 2017-11-10

De Tsunamis nos comentários:

Para obter a resolução nativa de um dispositivo móvel, você deve multiplicar a proporção de pixels do dispositivo: window.screen.width * window.devicePixelRatioe window.screen.height * window.devicePixelRatio. Isso também funcionará em desktops, que terão uma proporção de 1.

E de Ben em outra resposta:

No JavaScript de baunilha, isso fornecerá a largura / altura DISPONÍVEL:

window.screen.availHeight
window.screen.availWidth

Para a largura / altura absoluta, use:

window.screen.height
window.screen.width

var width = screen.width;
var height = screen.height;

No JavaScript de baunilha, isso fornecerá a largura / altura DISPONÍVEL :

window.screen.availHeight
window.screen.availWidth

Para a largura / altura absoluta, use:

window.screen.height
window.screen.width

Ambos os itens acima podem ser escritos sem o prefixo da janela.

Como jQuery? Isso funciona em todos os navegadores, mas cada navegador fornece valores diferentes.

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

Você quer dizer a resolução da tela (por exemplo, 72 pontos por polegada) ou as dimensões em pixels (a janela do navegador é atualmente de 1000 x 800 pixels)?

A resolução da tela permite que você saiba a espessura de uma linha de 10 pixels em polegadas. As dimensões em pixels informam qual porcentagem da altura da tela disponível será ocupada por uma linha horizontal de 10 pixels de largura.

Não há como saber a resolução da tela apenas a partir do Javascript, já que o próprio computador geralmente não conhece as dimensões reais da tela, apenas o número de pixels. 72 dpi é o palpite usual ....

Observe que há muita confusão sobre a resolução da tela, geralmente as pessoas usam o termo em vez da resolução de pixels, mas os dois são bem diferentes. Ver Wikipedia

Obviamente, você também pode medir a resolução em pontos por cm. Há também o assunto obscuro de pontos não quadrados. Mas eu discordo.

Usando jQuery você pode fazer:

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

Você também pode obter a largura e a altura da JANELA, evitando as barras de ferramentas do navegador e ... (não apenas o tamanho da tela).

Para fazer isso, use: window.innerWidth and window.innerHeightproperties. Veja-o em w3schools .

Na maioria dos casos, será a melhor maneira, por exemplo, de exibir um diálogo modal flutuante perfeitamente centralizado. Ele permite que você calcule as posições na janela, independentemente da orientação da resolução ou tamanho da janela usando o navegador.

Tentar fazer isso em um dispositivo móvel requer mais algumas etapas. screen.availWidthpermanece o mesmo, independentemente da orientação do dispositivo.

Aqui está minha solução para dispositivos móveis:

function getOrientation(){
    return Math.abs(window.orientation) - 90 == 0 ? "landscape" : "portrait";
};
function getMobileWidth(){
    return getOrientation() == "landscape" ? screen.availHeight : screen.availWidth;
};
function getMobileHeight(){
    return getOrientation() == "landscape" ? screen.availWidth : screen.availHeight;
};

Consulte Obter resolução da tela do monitor com Javascript e o window.screenobjeto

function getScreenWidth()
{
   var de = document.body.parentNode;
   var db = document.body;
   if(window.opera)return db.clientWidth;
   if (document.compatMode=='CSS1Compat') return de.clientWidth;
   else return db.clientWidth;
}

apenas para referência futura:

function getscreenresolution()
{
    window.alert("Your screen resolution is: " + screen.height + 'x' + screen.width);
}

Se você deseja detectar a resolução da tela, pode fazer check-out dos res do plug-in . Ele permite que você faça o seguinte:

var res = require('res')
res.dppx() // 1
res.dpi() // 96
res.dpcm() // 37.79527559055118

Aqui estão algumas ótimas sugestões de resolução de Ryan Van Etten, autor do plugin:

• Existem 2 conjuntos de unidades e diferem em uma escala fixa: unidades de dispositivo e unidades CSS.
• A resolução é calculada como o número de pontos que podem caber ao longo de um determinado comprimento CSS.
• Conversão de unidades: 1⁢in = 2,54⁢cm = 96⁢px = 72⁢pt
• CSS tem comprimentos relativos e absolutos. No zoom normal: 1⁢em = 16⁢px
• O dppx é equivalente à proporção de pixel do dispositivo.
• A definição de devicePixelRatio difere de acordo com a plataforma.
• As consultas de mídia podem ter como alvo a resolução mínima. Use com cuidado para a velocidade.

Aqui está o código-fonte para res, a partir de hoje:

!function(root, name, make) {
  if (typeof module != 'undefined' && module.exports) module.exports = make()
  else root[name] = make()
}(this, 'res', function() {

  var one = {dpi: 96, dpcm: 96 / 2.54}

  function ie() {
    return Math.sqrt(screen.deviceXDPI * screen.deviceYDPI) / one.dpi
  }

  function dppx() {
    // devicePixelRatio: Webkit (Chrome/Android/Safari), Opera (Presto 2.8+), FF 18+
    return typeof window == 'undefined' ? 0 : +window.devicePixelRatio || ie() || 0
  }

  function dpcm() {
    return dppx() * one.dpcm
  }

  function dpi() {
    return dppx() * one.dpi
  }

  return {'dppx': dppx, 'dpi': dpi, 'dpcm': dpcm}
});