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


196

Existe uma maneira que funcione para todos os navegadores?

Respostas:


296

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

16
Não está totalmente correto agora. Não considera possível alteração do zoom da página.
Sergzach

7
@sergzach - Nesse caso, eu usaria jQuery de $(window).width()vez, ver a resposta de chaim.dev
BornToCode

3
Use window.screen.height e window.screen.width para obter o tamanho exato da tela (conforme sugerido na próxima resposta). A razão que você não está recebendo o tamanho exato é que ele está verificando a largura ea altura disponível, isso significa que ele irá subtrair a altura da barra de ferramentas (que é exatamente 40px em janelas 7/8)
Jaruba

4
Não seria melhor se a resolução da tela fosse window.screen.height e width? por que availHeight? minha availWidth por exemplo, está retornando 1050, quando a sua realmente 1080.
Malavos

5
@ checkes você tem que multiplicar window.devicePixelRatio. Consulte o meu comentário na resposta de Alessandros.
Tsunamis

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

1
Isso é equivalente a window.screen. Deve apenas adicioná-lo à resposta existente.
Gajus

3
Na verdade, esta é a resposta correta. screen.availHeightapenas fornece a altura disponível na janela do navegador e screen.heightfornece a altura exata da tela.
apnerve

Isso retorna a resolução em escala de dpi, não a resolução da tela nativa.
Dominic Cerisano 01/06

4
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 irá trabalhar em desktops, que terá uma proporção de 1.
Tsunamis

Computadores desktop não terão necessariamente uma relação de 1.
12Me21

34

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

19

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.


19

Usando jQuery você pode fazer:

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

Essa é a solução mais fácil que eu já usei. Para largura do navegador, pelo menos ...
Zarne Dravitzki

34
Isso retorna o tamanho da janela, não a resolução da tela.
Jonas

19

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.


1
Esta é a solução mais útil. A propriedade window.screen.availWidth fornece a SCREEN, não a viewport, que pode ser diferente. É mais útil saber quanto bens realmente posso usar, não o que o máximo do navegador pode ser / tornar-se.
21817 Mike Mannakee

13

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

window.orientationretorna indefinido ... (Firefox 49) screen.orientation.angleretorna um ângulo, mas já está em 0 no modo paisagem.
Lambart 8/16


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

4

apenas para referência futura:

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

3

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}
});
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.