Próbuję napisać funkcję JavaScript, aby uzyskać bieżącą szerokość przeglądarki.

Znalazłem ten:

javascript:alert(document.body.offsetWidth);

Ale jego problemem jest to, że zawodzi, jeśli ciało ma szerokość 100%.

Czy jest jakaś inna lepsza funkcja lub obejście?

Aktualizacja na 2017 rok

Moja oryginalna odpowiedź została napisana w 2009 roku. Chociaż nadal działa, chciałbym ją zaktualizować na rok 2017. Przeglądarki mogą nadal zachowywać się inaczej. Ufam zespołowi jQuery, że wykonał świetną robotę w utrzymaniu spójności między przeglądarkami. Jednak nie jest konieczne dołączanie całej biblioteki. W źródle jQuery odpowiednia część znajduje się w wierszu 37 o wymiarach.js . Tutaj jest wyodrębniany i modyfikowany do pracy samodzielnej:

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

Oryginalna odpowiedź

Ponieważ wszystkie przeglądarki zachowują się inaczej, musisz najpierw przetestować wartości, a następnie użyć poprawnej. Oto funkcja, która robi to za Ciebie:

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

i podobnie dla wysokości:

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

Wywołaj oba w swoich skryptach, używając getWidth()lub getHeight(). Jeśli żadna z natywnych właściwości przeglądarki nie zostanie zdefiniowana, zostanie zwrócona undefined.

To boli w tyłek . Polecam pomijanie bzdur i używanie jQuery , co pozwala ci to zrobić $(window).width().

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

Obie zwracają liczby całkowite i nie wymagają jQuery. Kompatybilny z wieloma przeglądarkami.

Często stwierdzam, że jQuery zwraca nieprawidłowe wartości width () i height ()

Dlaczego nikt nie wspomina o 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 */
}

Nie testowałem tak dużo, ale testowałem z domyślnymi przeglądarkami Androida i Chrome Chrome, Chrome Desktop, do tej pory wygląda na to, że działa dobrze.

Oczywiście nie zwraca wartości liczbowej, ale zwraca wartość logiczną - jeśli pasuje lub nie, więc może nie do końca pasować do pytania, ale i tak tego chcemy, i prawdopodobnie autor pytania chce.

Od W3schools i jego przeglądarki z powrotem do mrocznych epok 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>

Oto krótsza wersja funkcji przedstawionej powyżej:

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

Dostosowane rozwiązanie do współczesnej odpowiedzi JS Travisa:

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

Ważny dodatek do odpowiedzi Travisa; musisz umieścić getWidth () w treści dokumentu, aby upewnić się, że szerokość paska przewijania jest policzona, w przeciwnym razie szerokość paska przewijania odjęta od getWidth (). Co ja zrobiłem ;

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

i wywołać zmienną aWidth gdziekolwiek później.