Ich versuche, eine JavaScript-Funktion zu schreiben, um die aktuelle Browserbreite zu erhalten.
Ich habe diesen gefunden:
javascript:alert(document.body.offsetWidth);Aber sein Problem, dass es versagt, wenn der Körper eine Breite von 100% hat.
Gibt es eine andere bessere Funktion oder eine Problemumgehung?
Antworten:
Meine ursprüngliche Antwort wurde 2009 geschrieben. Während es noch funktioniert, möchte ich es für 2017 aktualisieren. Browser können sich immer noch anders verhalten. Ich vertraue darauf, dass das jQuery-Team hervorragende Arbeit bei der Aufrechterhaltung der browserübergreifenden Konsistenz leistet. Es ist jedoch nicht erforderlich, die gesamte Bibliothek einzuschließen. In der jQuery-Quelle befindet sich der relevante Teil in Zeile 37 von dimensions.js . Hier wird es extrahiert und geändert, um eigenständig zu arbeiten:
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() );Da sich alle Browser unterschiedlich verhalten, müssen Sie zuerst nach Werten suchen und dann den richtigen verwenden. Hier ist eine Funktion, die dies für Sie erledigt:
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;
}
}und ähnlich für die Höhe:
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;
}
}Rufen Sie beide in Ihren Skripten mit getWidth()oder auf getHeight(). Wenn keine der nativen Eigenschaften des Browsers definiert ist, wird dieser zurückgegeben undefined.
self.innerWidth 423, document.documentElement.clientWidth 326und document.body.clientWidth 406. In diesem Fall Frage: Was ist richtig und welches zu verwenden? Zum Beispiel möchte ich die Größe von Google Map ändern. 326 oder 423 großer Unterschied. Wenn die Breite ~ 700 ist, dann siehe 759, 735, 742 (nicht so großer Unterschied)
var pageWidth = Math.max(self.innerWidth || 0, document.documentElement.clientWidth || 0, document.body.clientWidth || 0);und var windowWidth = self.innerWidth || -1;// wegen "body" oder "screen" oder "document" sind nicht das "Fenster", wenn Sie einen überfüllten HTML-Inhalt überprüfen, den Sie verstehen können. # i.stack.imgur.com/6xPdH.png
getWidth()Referenzenself.innerHeight
Es ist ein Schmerz im Arsch . Ich empfehle, den Unsinn zu überspringen und jQuery zu verwenden , damit Sie es einfach tun können $(window).width().
var w = window.innerWidth;
var h = window.innerHeight;
var ow = window.outerWidth; //including toolbars and status bar etc.
var oh = window.outerHeight;Beide geben Ganzzahlen zurück und erfordern keine jQuery. Browserübergreifend kompatibel.
Ich finde oft, dass jQuery ungültige Werte für width () und height () zurückgibt.
Warum erwähnt niemand 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 */
}Habe nicht so viel getestet, aber mit Android Standard und Android Chrome Browsern, Desktop Chrome getestet, bis jetzt sieht es so aus, als ob es gut funktioniert.
Natürlich gibt es keinen Zahlenwert zurück, sondern einen Booleschen Wert - ob übereinstimmt oder nicht, passt also möglicherweise nicht genau zur Frage, aber das wollen wir trotzdem und wahrscheinlich will der Autor der Frage.
Von W3schools und seinem Cross-Browser zurück in die dunklen Zeiten des 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>Hier ist eine kürzere Version der oben dargestellten Funktion:
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;
}Eine angepasste Lösung für die Antwort von JS of 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);
};Eine wichtige Ergänzung zu Travis 'Antwort; Sie müssen getWidth () in Ihren Dokumentkörper einfügen, um sicherzustellen, dass die Breite der Bildlaufleiste gezählt wird. Andernfalls wird die Breite der Bildlaufleiste des Browsers von getWidth () abgezogen. Was ich getan habe ;
<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>und rufen Sie danach irgendwo eine aWidth-Variable auf.