Finden Sie die genaue Höhe und Breite des Ansichtsfensters browserübergreifend
Lesezeit: 4 Minuten
Alex Grinsen
Ich versuche, die genaue Höhe und Breite des Ansichtsfensters eines Browsers zu ermitteln, vermute aber, dass mir entweder Mozilla oder IE die falsche Zahl angibt. Hier ist meine Methode für die Höhe:
var viewportHeight = window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
Mit der Breite habe ich noch nicht begonnen, aber ich vermute, dass es etwas Ähnliches sein wird.
Gibt es einen korrekteren Weg, diese Informationen zu erhalten? Idealerweise möchte ich, dass die Lösung auch mit Safari/Chrome/anderen Browsern funktioniert.
Mögliches Duplikat von „Ermitteln Sie die Abmessungen des Browser-Ansichtsfensters mit JavaScript“.
– Stephan
24. November 2014 um 13:28
Sie können auch die verwenden W Bibliothek, die die browserübergreifende Ansichtsfenstererkennung übernimmt 😉
– pyrsmk
29. April 2016 um 13:51 Uhr
Löwe
Sie könnten Folgendes versuchen:
function getViewport() {
var viewPortWidth;
var viewPortHeight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined') {
viewPortWidth = window.innerWidth,
viewPortHeight = window.innerHeight
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0) {
viewPortWidth = document.documentElement.clientWidth,
viewPortHeight = document.documentElement.clientHeight
}
// older versions of IE
else {
viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
}
return [viewPortWidth, viewPortHeight];
}
Allerdings ist es nicht einmal möglich, die Viewport-Informationen in allen Browsern abzurufen (z. B. IE6 im Quirks-Modus). Aber das obige Skript sollte gute Arbeit leisten 🙂
Ich stecke seit ungefähr 5 Stunden mit einem Fehler fest und es stellt sich heraus, dass JQuery dabei in FF/Chrome nicht den gleichen Wert zurückgibt $(document).width() oder $(window).width(). window.innerWidth funktioniert super.
– qwerty
11. Dezember 2012 um 12:59 Uhr
Dies scheint innerhalb von Iframes nicht zu funktionieren, stattdessen wird die Iframe-Größe zurückgegeben. Irgendeine Ahnung dazu?
– Alejandro García Iglesias
9. August 2013 um 19:42 Uhr
@GarciaWebDev Sie sagen also, dass es richtig funktioniert 😉
– Dee2000
30. Okt. 2013 um 16:52 Uhr
@Dee2000 Was ich sagen oder vielmehr sagen möchte, ist, dass Sie beim Messen auf einer normalen Seite die Größe des Browser-Ansichtsfensters erhalten, aber wenn Sie innerhalb eines Iframes messen, erhalten Sie die Dokumentgröße dieses Iframes, nicht die Browser-Ansichtsfenster. Ich bin mir nicht sicher, ob ich es gut erkläre. Lassen Sie mich wissen, ob ich es umformulieren sollte.
– Alejandro García Iglesias
31. Okt. 2013 um 5:22
@GarciaWebDev Auf einer einfachen Seite denken Sie, dass Sie die Größe des Browser-Ansichtsfensters erhalten, aber das ist nicht der Fall. Sie erhalten die Darstellungsgröße der HTML-Seite, auf der Sie sich befinden. Unabhängig davon, ob diese Seite „oben“ ist oder sich in einem Iframe oder einem verschachtelten Iframe befindet, ist es immer die Größe des Ansichtsfensters der HTML-Seite, auf der Sie sich befinden. Wenn Sie die Größe des Ansichtsfensters der oberen (oder übergeordneten) Seite wissen möchten, solange Ihr Iframe „freundlich“ (nicht domänenübergreifend) ist, können Sie einfach „Fenster“ ersetzen. mit Eltern.” oder „oben“. zu jedem Wert, den Sie testen (z. B. parent.innerWidth).
– Dee2000
31. Okt. 2013 um 13:33 Uhr
dzona
Sie können eine kürzere Version verwenden:
<script type="text/javascript">
<!--
function getViewportSize(){
var e = window;
var a="inner";
if (!('innerWidth' in window)){
a="client";
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
}
//-->
</script>
Ben
Ich habe immer nur verwendet document.documentElement.clientHeight/clientWidth. Ich glaube nicht, dass Sie in diesem Fall die ODER-Bedingungen benötigen.
Es konnte nicht schaden. Der Rest wird nicht ausgewertet, sobald ein gültiger Wert gefunden wird
– Justin Johnson
19. November 2009 um 22:53
Sie haben dort einen Tippfehler, sollte lauten: ‘document.documentElement’. Dies funktioniert nicht im Quircksmode … auf FF wird die gesamte Dokumenthöhe angezeigt, statt nur „clientHeight“, und auf IE wird „0“ angezeigt.
Einverstanden. Aus: quirksmode.org/mobile/viewports.html – “document.documentElement ist in der Tat das <html> Element”. “document.documentElement.clientWidth Und clientHeight Gibt immer noch die Abmessungen des Ansichtsfensters an und nicht des <html> Element. (Das ist eine Sonderregelung das geht nur für dieses Element nur für dieses Eigenschaftspaar. In allen anderen Fällen wird die tatsächliche Breite des Elements verwendet. Daher sollte es „in allen Fällen“ ab dem IE6-Standardmodus und aufwärts funktionieren. Diese Werte sind ausschließlich Bildlaufleisten (im Gegensatz zu window.innerWidth Und innerHeight).
– GitaarLAB
14. August 2015 um 22:39 Uhr
Mathi
Versuche dies..
<script type="text/javascript">
function ViewPort()
{
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
var viewsize = w + "," + h;
alert("Your View Port Size is:" + viewsize);
}
</script>
Mögliches Duplikat von „Ermitteln Sie die Abmessungen des Browser-Ansichtsfensters mit JavaScript“.
– Stephan
24. November 2014 um 13:28
Sie können auch die verwenden W Bibliothek, die die browserübergreifende Ansichtsfenstererkennung übernimmt 😉
– pyrsmk
29. April 2016 um 13:51 Uhr