Jak uzyskać szerokość przeglądarki za pomocą kodu JavaScript?

180

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?

javascript jquery html css Amr Elgarhy
źródło

Odpowiedzi:

133

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() );
Rozwiń fragment kodu

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.

Travis
źródło
11
Najlepsza odpowiedź, ponieważ nie muszę dołączać biblioteki 33k dla prostego przekierowania opartego na szerokości okna przeglądarki
David Aguirre
1
Daje to właściwe (lub oczekiwane) wyniki konsekwentnie w porównaniu z implementacją jQuery.
Emmanuel John,
3
... każdy z tych trzech pokazuje niektóre wyniki, a wszystkie wyniki (szerokości) są różne. Na przykład Google Chrome zobaczyć self.innerWidth 423, document.documentElement.clientWidth 326i document.body.clientWidth 406. W takim przypadku pytanie: które jest prawidłowe i którego użyć? Na przykład chcę zmienić rozmiar mapy Google. Duża różnica 326 lub 423. Jeśli szerokość ~ 700, to zobacz 759, 735, 742 (niezbyt duża różnica)
Andris
1
@ user2118559 var pageWidth = Math.max(self.innerWidth || 0, document.documentElement.clientWidth || 0, document.body.clientWidth || 0);i var windowWidth = self.innerWidth || -1;// z powodu „treści”, „ekranu” lub „dokumentu” nie są „oknem”, jeśli zaznaczysz przepełnioną treść HTML, którą możesz zrozumieć. # i.stack.imgur.com/6xPdH.png
Abdullah Aydın
1
błąd kopiuj-wklej w twoim przykładzie, getWidth()odwołania do funkcjiself.innerHeight
theGecko
309

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

chaos
źródło
2
Jeśli dobrze pamiętałem, jQuery wciągnął wiele wymiarów do rdzenia. Czy nadal potrzebujesz wymiarów, aby robić to, co sugerujesz?
Nosredna
Okazuje się, że nie. Co jest niesamowite. Edytowana odpowiedź na. Dzięki za zgłoszenie się.
chaos
6
Obsługa $ (window) .width () w jQuery jest od wersji 1.2, na wypadek, gdyby była istotna dla każdego.
chaos
18
Przekonałem się, że $ (window) .width () nie zawsze zwraca tę samą wartość co innerWidth / clientWidth, jak w przykładach w odpowiedzi poniżej. Wersja jQuery nie uwzględnia pasków przewijania przeglądarki (w każdym razie w FF). Spowodowało to duże zamieszanie w zapytaniach CSS @media, które wydawały się wyzwalać przy niewłaściwej szerokości. Korzystanie z kodu natywnego wydaje się bardziej niezawodne, ponieważ uwzględnia wygląd pasków przewijania.
Koder,
5
Dodanie 30 tys. Linii kodu w celu uzyskania szerokości okna to ZŁE rozwiązanie!
codechimp
49 
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 ()

Bradley Flood
źródło
1
Problemy z korzystaniem z tego na Safari iPhone.
n everest
17

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.

Darius.V
źródło
1
Obsługuje tylko IE10 +.
qarthandso,
17
Jeśli używają IE9 lub starszej wersji, nie zasługują na Internet.
Darius.V
Safari iPhone nie obsługuje tego.
n everest
Nowsze wersje iOS Safari powinny obsługiwać matchMedia. Źródło: caniuse.com/#feat=matchmedia
Vargr
8

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>
użytkownik3651121
źródło
Podejście to działa pięknie i może być przyjętą odpowiedzią, ponieważ jest znacznie krótsze niż jakiekolwiek inne rozwiązanie (oprócz użycia jQuery).
Simon Steinberger
2
Czy nie zgłosi błędu, jeśli nie zdefiniowano document.documentElement?
PhiLho
6

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;
}
ismael
źródło
4
Który nie zwraca wartości, jeśli wszystkie warunki są fałszywe.
Mike C
10
Nie potrzebujesz innych :)
Nick
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);
};
Sergiu
źródło
0

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.

burkul
źródło