Como obter a largura do navegador usando o código JavaScript?

180

Estou tentando escrever uma função JavaScript para obter a largura atual do navegador.

Eu encontrei este:

javascript:alert(document.body.offsetWidth);

Mas é problema que ele falhe se o corpo tiver largura 100%.

Existe alguma outra função melhor ou uma solução alternativa?

javascript jquery html css Amr Elgarhy
fonte

Respostas:

133

Atualização para 2017

Minha resposta original foi escrita em 2009. Embora ainda funcione, eu gostaria de atualizá-la para 2017. Os navegadores ainda podem se comportar de maneira diferente. Confio na equipe do jQuery para fazer um ótimo trabalho na manutenção da consistência entre navegadores. No entanto, não é necessário incluir a biblioteca inteira. Na fonte jQuery, a parte relevante é encontrada na linha 37 de Dimensions.js . Aqui é extraído e modificado para funcionar de forma independente:

function getWidth() {
  return Math.max(
    document.body.scrollWidth,
    document.documentElement.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.offsetWidth,
    document.documentElement.clientWidth
  );
}

function getHeight() {
  return Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.offsetHeight,
    document.documentElement.clientHeight
  );
}

console.log('Width:  ' +  getWidth() );
console.log('Height: ' + getHeight() );
Expandir snippet

Resposta original

Como todos os navegadores se comportam de maneira diferente, primeiro você precisa testar os valores e depois usar o correto. Aqui está uma função que faz isso por você:

function getWidth() {
  if (self.innerWidth) {
    return self.innerWidth;
  }

  if (document.documentElement && document.documentElement.clientWidth) {
    return document.documentElement.clientWidth;
  }

  if (document.body) {
    return document.body.clientWidth;
  }
}

e da mesma forma para altura:

function getHeight() {
  if (self.innerHeight) {
    return self.innerHeight;
  }

  if (document.documentElement && document.documentElement.clientHeight) {
    return document.documentElement.clientHeight;
  }

  if (document.body) {
    return document.body.clientHeight;
  }
}

Chame esses dois em seus scripts usando getWidth()ou getHeight(). Se nenhuma das propriedades nativas do navegador estiver definida, ele retornará undefined.

Travis
fonte
11
Melhor resposta, porque eu não tenho que incluem uma biblioteca 33k para um simples redirecionamento com base na largura da janela do navegador
David Aguirre
1
Isso produz os resultados corretos (ou esperados) consistentemente comparados à implementação do jQuery.
Emmanuel John
3
... cada um desses três mostra algum resultado e todos os resultados (larguras) são diferentes. Por exemplo, com o Google Chrome self.innerWidth 423, consulte document.documentElement.clientWidth 326e document.body.clientWidth 406. Nesse caso, pergunta: qual é o correto e qual usar? Por exemplo, eu quero redimensionar o google map. 326 ou 423 grande diferença. Se a largura ~ 700, em seguida, ver 759, 735, 742 (não tão grande diferença)
Andris
1
@ user2118559 var pageWidth = Math.max(self.innerWidth || 0, document.documentElement.clientWidth || 0, document.body.clientWidth || 0);e var windowWidth = self.innerWidth || -1;// por causa de "corpo" ou "tela" ou "documento" não são a "janela" se você verificar um conteúdo transbordado de html, poderá entender. # i.stack.imgur.com/6xPdH.png
Abdullah Aydın
1
copy-paste de erro no seu exemplo, função de getWidth()referênciasself.innerHeight
theGecko
309

É um pé no saco . Eu recomendo ignorar o absurdo e usar o jQuery , o que permite fazer isso $(window).width().

caos
fonte
2
Se bem me lembrei, o jQuery puxou muitas dimensões para o núcleo. Você ainda precisa de dimensões para fazer o que está sugerindo?
Nosredna
Acontece que você não. O que é incrível. Resposta editada por. Obrigado pelo aviso.
caos
6
O suporte a $ (window) .width () no jQuery é desde a versão 1.2, caso seja relevante para qualquer pessoa.
caos
18
Descobri que $ (window) .width () nem sempre retorna o mesmo valor que innerWidth / clientWidth conforme os exemplos na resposta abaixo. A versão do jQuery não leva em conta as barras de rolagem do navegador (no FF de qualquer maneira). Isso me causou muita confusão com as consultas CSS @media parecendo disparar na largura errada. O uso de código nativo parece ser mais confiável, pois leva em consideração a aparência das barras de rolagem.
Coder
5
Adicionar 30k linhas de código para obter a largura da janela é uma solução MAU!
codechimp
49 
var w = window.innerWidth;
var h = window.innerHeight;
var ow = window.outerWidth; //including toolbars and status bar etc.
var oh = window.outerHeight;

Ambos retornam números inteiros e não requerem jQuery. Compatível com vários navegadores.

Costumo encontrar jQuery retorna valores inválidos para width () e height ()

Bradley Flood
fonte
1
Tendo problemas para usar isso no iphone Safari.
Ever Everest
17

Por que ninguém menciona a matchMedia?

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}

Não testou muito, mas testou com os navegadores padrão Android e Chrome Chrome, Chrome Desktop, até agora parece que funciona bem.

Obviamente, ele não retorna valor numérico, mas retorna booleano - se corresponde ou não, portanto, pode não se encaixar exatamente na pergunta, mas é isso que queremos de qualquer maneira e provavelmente o autor da pergunta deseja.

Darius.V
fonte
1
Suporta apenas o IE10 +.
precisa saber é o seguinte
17
Se eles usam o IE9 ou mais antigo, eles não merecem a internet.
Darius.V
O iphone Safari não parece suportar isso.
Ever Everest
As versões mais recentes do iOS Safari devem suportar o matchMedia. Fonte: caniuse.com/#feat=matchmedia
Vargr
8

Desde o W3schools e seu navegador cruzado, até a idade das trevas do IE!

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";

alert("Browser inner window width: " + w + ", height: " + h + ".");

</script>

</body>
</html>
user3651121
fonte
A abordagem funciona perfeitamente e pode ser a resposta aceita, porque é muito mais curta do que qualquer outra solução (além de usar o jQuery).
Simon Steinberger
2
Não lançará um erro se document.documentElement for indefinido?
PhiLho
6

Aqui está uma versão mais curta da função apresentada acima:

function getWidth() {
    if (self.innerWidth) {
       return self.innerWidth;
    }
    else if (document.documentElement && document.documentElement.clientHeight){
        return document.documentElement.clientWidth;
    }
    else if (document.body) {
        return document.body.clientWidth;
    }
    return 0;
}
ismael
fonte
4
O que falha ao retornar um valor se todas as condições forem falsas.
Mike C
10
Você não precisa os elses :)
Nick
0

Uma solução adaptada para a resposta moderna de JS de Travis:

const getPageWidth = () => {
  const bodyMax = document.body
    ? Math.max(document.body.scrollWidth, document.body.offsetWidth)
    : 0;

  const docElementMax = document.documentElement
    ? Math.max(
        document.documentElement.scrollWidth,
        document.documentElement.offsetWidth,
        document.documentElement.clientWidth
      )
    : 0;

  return Math.max(bodyMax, docElementMax);
};
Sergiu
fonte
0

Uma adição importante à resposta de Travis; você precisa colocar o getWidth () no corpo do documento para garantir que a largura da barra de rolagem seja contada; caso contrário, a largura da barra de rolagem do navegador subtraída de getWidth (). O que eu fiz ;

<body>
<script>
function getWidth(){
return Math.max(document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth);
}
var aWidth=getWidth();
</script>
</body>

e chame a variável aWidth em qualquer lugar posteriormente.

Burkul
fonte