it-swarm-pt.tech

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

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

Eu encontrei este aqui:

javascript:alert(document.body.offsetWidth);

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

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

168
Amr Elgarhy

Atualização para 2017

Minha resposta original foi escrita em 2009. Embora ainda funcione, gostaria de atualizá-la para 2017. Os navegadores ainda podem se comportar de maneira diferente. Eu confio na equipe da jQuery para fazer um ótimo trabalho na manutenção da consistência entre navegadores. No entanto, não é necessário incluir toda a biblioteca. Na fonte jQuery, a parte relevante é encontrada em 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() );

Resposta Original

Como todos os navegadores se comportam de maneira diferente, primeiro é necessário testar os valores e, em seguida, usar o correto. Aqui está uma função que faz isso para 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 ambos em seus scripts usando getWidth() ou getHeight(). Se nenhuma das propriedades nativas do navegador for definida, ele retornará undefined.

111
Travis

É um dor no rabo . Eu recomendo ignorar o absurdo e usar jQuery , que permite que você faça $(window).width().

301
chaos
var w = window.innerWidth;
var h = window.innerHeight;
var ow = window.outerWidth; //including toolbars and status bar etc.
var oh = window.outerHeight;

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

Eu frequentemente encontro jQuery retorna valores inválidos para width () e height ()

46
Bradley Flood

Por que ninguém menciona 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 Android default e Android chrome browsers, desktop chrome, até agora parece que funciona bem.

É claro que ele não retorna o valor numérico, mas retorna booleano - se corresponder ou não, pode não corresponder exatamente à pergunta, mas é o que queremos de qualquer maneira e provavelmente o autor da pergunta quer.

14
Darius.V

De W3schools e seu navegador cross volta para 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>
7
user3651121

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