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?
Respostas:
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() );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.
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)
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
getWidth()referênciasself.innerHeight
É um pé no saco . Eu recomendo ignorar o absurdo e usar o jQuery , o que permite fazer isso $(window).width().
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 ()
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.
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>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;
}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);
};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.