Existe uma maneira que funcione para todos os navegadores?
Existe uma maneira que funcione para todos os navegadores?
Respostas:
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.devicePixelRatio
ewindow.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
$(window).width()
vez, ver a resposta de chaim.dev
window.devicePixelRatio
. Consulte o meu comentário na resposta de Alessandros.
var width = screen.width;
var height = screen.height;
window.screen
. Deve apenas adicioná-lo à resposta existente.
screen.availHeight
apenas fornece a altura disponível na janela do navegador e screen.height
fornece a altura exata da tela.
window.screen.width * window.devicePixelRatio
e window.screen.height * window.devicePixelRatio
. Isso também irá trabalhar em desktops, que terá uma proporção de 1.
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.innerHeight
properties. 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.availWidth
permanece 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.orientation
retorna indefinido ... (Firefox 49) screen.orientation.angle
retorna um ângulo, mas já está em 0 no modo paisagem.
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:
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}
});