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?
Odpowiedzi:
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() );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.
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)
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
getWidth()odwołania do funkcjiself.innerHeight
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.