Verwenden von jQuery zum Abrufen der Größe des Ansichtsfensters

308

Wie bestimme ich mit jQuery die Größe des Browser-Ansichtsfensters und erkenne dies erneut, wenn die Größe der Seite geändert wird? Ich muss eine IFRAME-Größe in diesen Bereich einfügen (an jedem Rand ein wenig).

Für diejenigen, die es nicht wissen, hat das Browser-Ansichtsfenster nicht die Größe des Dokuments / der Seite. Dies ist die sichtbare Größe Ihres Fensters vor dem Bildlauf.

jquery resize size viewport Volomike
quelle
Haben Sie eine Idee, wie Sie den Bereich erhalten, der auf dem Gerätebildschirm angezeigt wird, und nicht nur, wohin er scrollen kann? Ich sehe $ (Fenster) .height (), das die volle Breite des Dokuments zurückgibt, nicht den Teil, auf den gezoomt wird. Ich möchte wissen, wie viel sichtbar ist, nachdem der Zoom angewendet wurde.
Frank Schwieterman
appelsiini.net/projects/viewport Das sollte es tun! :)
Mackelito
1
Dies ist keine direkte Antwort auf die Frage, kann aber für diejenigen nützlich sein, die Selektoren entsprechend ihrer Position und Sichtbarkeit relativ zum Ansichtsfenster manipulieren möchten : appelsiini.net/projects/viewport (Plugin)
Wallace Sidhrée

Antworten:

484

So ermitteln Sie die Breite und Höhe des Ansichtsfensters:

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

Größenänderung des Ereignisses der Seite:

$(window).resize(function() {

});
SimaWB
quelle
18
Ich habe dies unter Windows IE6, IE8, FF3.6.3, Google Chrome 5.0.375.70, Opera 10.53 und Safari 5.0 (7533.16) getestet. Dies funktioniert konsequent bei all diesen. Ich habe auch FF3.6.3 unter Ubuntu getestet und es funktioniert auch dort. Ich glaube, ich verwende jQuery 1.3 mit WordPress 2.9.2, wo ich das brauchte, um zu funktionieren.
Volomike
48
Haben Sie eine Idee, wie Sie den Bereich erhalten, der auf dem Gerätebildschirm angezeigt wird, und nicht nur, wohin er scrollen kann? Ich sehe $ (Fenster) .height (), das die volle Breite des Dokuments zurückgibt, nicht den Teil, auf den gezoomt wird. Ich möchte wissen, wie viel sichtbar ist, nachdem der Zoom angewendet wurde.
Frank Schwieterman
9
Eigentlich ist innerWidth/ innerHeightkorrekter zu verwenden (Zoom abdecken).
18
@FrankSchwieterman Möglicherweise verhält sich Ihr Browser nicht so, wie Sie es möchten: Möglicherweise tritt dieses Problem auf: stackoverflow.com/q/12103208/923560 . Stellen Sie sicher, dass Ihre HTML-Datei eine ordnungsgemäße DOCTYPEDeklaration enthält, z <!DOCTYPE html>.
Abdull
21
Das ist völlig falsch. Dies gibt Ihnen die Größe des Dokuments an, nicht das Ansichtsfenster (die Größe des Fensters auf dem Dokument).
Mike Bethany
26

1. Antwort auf die Hauptfrage

Das Skript $(window).height()funktioniert gut (zeigt die Höhe des Ansichtsfensters und nicht das Dokument mit Bildlaufhöhe an), ABER es erfordert, dass Sie das Doctype-Tag korrekt in Ihr Dokument einfügen, zum Beispiel diese Doctypes:

Für HTML 5:

<!DOCTYPE html>

Für Übergangs-HTML4:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Wahrscheinlich ist der von einigen Browsern angenommene Standard-Doctype ein solcher, $(window).height()der die Höhe des Dokuments und nicht die Höhe des Browsers verwendet. Mit der Doctype-Spezifikation ist sie zufriedenstellend gelöst, und ich bin mir ziemlich sicher, dass Sie Peps vermeiden werden, den "Scroll-Overflow in versteckt und dann zurück zu ändern", was leider ein etwas schmutziger Trick ist, besonders wenn Sie es nicht tun. t Dokumentieren Sie es im Code für die zukünftige Verwendung durch den Programmierer.

2. Ein ZUSÄTZLICHER Tipp, beachten Sie Folgendes: Wenn Sie ein Skript erstellen, können Sie außerdem Tests erfinden, die Programmierern bei der Verwendung Ihrer Bibliotheken helfen. Lassen Sie mich ein paar erfinden:

$ (Dokument) .ready (Funktion () {

      if(typeof $=='undefined') {
        alert("PROGRAMMER'S Error: you haven't called JQuery library");
      } else if (typeof $.ui=='undefined') {
        alert("PROGRAMMER'S Error: you haven't installed the UI Jquery library");
      }
      if(document.doctype==null || screen.height < parseInt($(window).height()) ) {
        alert("ERROR, check your doctype, the calculated heights are not what you might expect");
      }

});

BEARBEITEN: über Teil 2, "Ein ZUSÄTZLICHER Tipp, Anmerkung beiseite": @Machiel, im gestrigen Kommentar (04.09.2014), war UTTERLY richtig: Der Scheck des $ kann nicht im fertigen Ereignis von Jquery sein, weil Wir gehen, wie er betonte, davon aus, dass $ bereits definiert ist. DANKE FÜR DAS AUSZEICHNEN, und bitte korrigieren Sie den Rest Ihrer Leser, wenn Sie es in Ihren Skripten verwendet haben. Mein Vorschlag ist: Fügen Sie in Ihre Bibliotheken eine "install_script ()" - Funktion ein, die die Bibliothek initialisiert (setzen Sie einen Verweis auf $ in eine solche init-Funktion, einschließlich der Deklaration von ready ()) und zu Beginn einer solchen "install_script ()" - Funktion Überprüfen Sie, ob das $ definiert ist, machen Sie jedoch alles unabhängig von JQuery, damit Ihre Bibliothek "sich selbst diagnostizieren" kann, wenn JQuery noch nicht definiert ist. Ich bevorzuge diese Methode, anstatt die automatische Erstellung einer JQuery zu erzwingen, die sie von einem CDN bringt. Das sind winzige Notizen, um anderen Programmierern zu helfen. Ich denke, dass Leute, die Bibliotheken erstellen, mehr Feedback zu Fehlern potenzieller Programmierer erhalten müssen. Zum Beispiel benötigt Google Apis ein Handbuch, um die Fehlermeldungen zu verstehen. Es ist absurd, externe Dokumentation für einige kleine Fehler zu benötigen, bei denen Sie nicht nach einem Handbuch oder einer Spezifikation suchen müssen. Die Bibliothek muss SELBSTDOKUMENTIERT sein. Ich schreibe Code, der sich sogar um die Fehler kümmert, die ich in sechs Monaten begehen könnte, und es versucht immer noch, ein sauberer und sich nicht wiederholender Code zu sein, der bereits geschrieben wurde, um zukünftige Entwicklerfehler zu verhindern. Ich denke, dass Leute, die Bibliotheken erstellen, mehr Feedback zu Fehlern potenzieller Programmierer erhalten müssen. Zum Beispiel benötigt Google Apis ein Handbuch, um die Fehlermeldungen zu verstehen. Es ist absurd, externe Dokumentation für einige kleine Fehler zu benötigen, bei denen Sie nicht nach einem Handbuch oder einer Spezifikation suchen müssen. Die Bibliothek muss SELBSTDOKUMENTIERT sein. Ich schreibe Code, der sich sogar um die Fehler kümmert, die ich in sechs Monaten begehen könnte, und es versucht immer noch, ein sauberer und sich nicht wiederholender Code zu sein, der bereits geschrieben wurde, um zukünftige Entwicklerfehler zu verhindern. Ich denke, dass Leute, die Bibliotheken erstellen, mehr Feedback zu Fehlern potenzieller Programmierer erhalten müssen. Zum Beispiel benötigt Google Apis ein Handbuch, um die Fehlermeldungen zu verstehen. Es ist absurd, externe Dokumentation für einige kleine Fehler zu benötigen, bei denen Sie nicht nach einem Handbuch oder einer Spezifikation suchen müssen. Die Bibliothek muss SELBSTDOKUMENTIERT sein. Ich schreibe Code, der sich sogar um die Fehler kümmert, die ich in sechs Monaten begehen könnte, und es versucht immer noch, ein sauberer und sich nicht wiederholender Code zu sein, der bereits geschrieben wurde, um zukünftige Entwicklerfehler zu verhindern. Sie müssen nicht nach einem Handbuch oder einer Spezifikation suchen. Die Bibliothek muss SELBSTDOKUMENTIERT sein. Ich schreibe Code, der sich sogar um die Fehler kümmert, die ich in sechs Monaten begehen könnte, und es versucht immer noch, ein sauberer und sich nicht wiederholender Code zu sein, der bereits geschrieben wurde, um zukünftige Entwicklerfehler zu verhindern. Sie müssen nicht nach einem Handbuch oder einer Spezifikation suchen. Die Bibliothek muss SELBSTDOKUMENTIERT sein. Ich schreibe Code, der sich sogar um die Fehler kümmert, die ich in sechs Monaten begehen könnte, und es versucht immer noch, ein sauberer und sich nicht wiederholender Code zu sein, der bereits geschrieben wurde, um zukünftige Entwicklerfehler zu verhindern.

David L.
quelle
2
Es ist sehr schwer, Ihren Beitrag zu lesen. Bitte wiederholen Sie Ihren Beitrag, damit Sie sich wie alle anderen an den StackExchange Markdown gewöhnen . Es gibt einen Grund, warum StackExchange-Sites TinyMCE nicht verwenden. Wenn Sie jedoch Probleme damit haben, beteiligen Sie sich an der Meta .
Volomike
Es ist etwas seltsam, dass Sie die Verfügbarkeit überprüfen, $nachdem Sie den $Anruf bereits verwendet haben $(document).ready(function() { } );. Es ist gut, wenn Sie überprüfen, ob jQuery verfügbar ist, aber zu diesem Zeitpunkt ist es bereits zu spät.
Machiel
@Machiel, du bist wirklich richtig. Zum Glück habe ich nur meine Skripte überprüft und sie verwenden das Ereignis ready nicht. Ja, danke, ich fühlte mich dumm, als Sie das sagten, aber zum Glück habe ich gerade überprüft, dass sich die Überprüfung in meinen Skripten in einer Funktion namens "install_this_script ()" befindet, und in einer solchen Installation rufe ich die init-Funktion der Bibliothek auf, aber vorher überprüfe ich (OUTSIDE JQUERY), ob das $ -Objekt definiert ist oder nicht. DANKE, Bruder, du hast mich wirklich ausgeflippt! Ich fürchte, dieser Beitrag war zu lange hier. Ich hoffe, dieser Fehler hat den anderen Lesern nicht viel geschadet. Ich habe den Beitrag korrigiert.
David L
Dies sollte die wahre Antwort sein! Vielen Dank!
Justin T. Watts
6

Mit $ (window) .resize () können Sie feststellen, ob die Größe des Ansichtsfensters geändert wurde.

jQuery hat keine Funktion, um die korrekte Breite und Höhe des Ansichtsfensters [1] konsistent zu erkennen, wenn eine Bildlaufleiste vorhanden ist.

Ich habe eine Lösung gefunden, die die Modernizr-Bibliothek und speziell die mq-Funktion verwendet, mit der Medienabfragen für Javascript geöffnet werden.

Hier ist meine Lösung:

// A function for detecting the viewport minimum width.
// You could use a similar function for minimum height if you wish.
var min_width;
if (Modernizr.mq('(min-width: 0px)')) {
    // Browsers that support media queries
    min_width = function (width) {
        return Modernizr.mq('(min-width: ' + width + ')');
    };
}
else {
    // Fallback for browsers that does not support media queries
    min_width = function (width) {
        return $(window).width() >= width;
    };
}

var resize = function() {
    if (min_width('768px')) {
        // Do some magic
    }
};

$(window).resize(resize);
resize();

Meine Antwort wird wahrscheinlich nicht dazu beitragen, die Größe eines Iframes auf 100% der Breite des Ansichtsfensters mit einem Rand auf jeder Seite zu ändern, aber ich hoffe, dass dies Webentwicklern Trost bietet, die von der Browser-Inkohärenz der Berechnung der Breite und Höhe des Javascript-Ansichtsfensters enttäuscht sind.

Vielleicht könnte dies in Bezug auf den Iframe helfen:

$('iframe').css('width', '100%').wrap('<div style="margin:2em"></div>');

[1] Sie können $ (Fenster) .width () und $ (Fenster) .height () verwenden, um eine Zahl zu erhalten, die in einigen Browsern korrekt, in anderen jedoch falsch ist. In diesen Browsern können Sie versuchen, window.innerWidth und window.innerHeight zu verwenden, um die richtige Breite und Höhe zu erhalten, aber ich würde von dieser Methode abraten, da sie auf dem Schnüffeln von Benutzeragenten beruht.

Normalerweise sind sich die verschiedenen Browser nicht einig, ob sie die Bildlaufleiste als Teil der Fensterbreite und -höhe enthalten oder nicht.

Hinweis: Sowohl $ (window) .width () als auch window.innerWidth variieren zwischen Betriebssystemen, die denselben Browser verwenden. Siehe: https://github.com/eddiemachado/bones/issues/468#issuecomment-23626238

Forsvunnet
quelle
4 
function showViewPortSize(display) {
    if (display) {
        var height = window.innerHeight;
        var width = window.innerWidth;
        jQuery('body')
            .prepend('<div id="viewportsize" style="z-index:9999;position:fixed;bottom:0px;left:0px;color:#fff;background:#000;padding:10px">Height: ' + height + '<br>Width: ' + width + '</div>');
        jQuery(window)
            .resize(function() {
                height = window.innerHeight;
                width = window.innerWidth;
                jQuery('#viewportsize')
                    .html('Height: ' + height + '<br>Width: ' + width);
            });
    }
}
$(document)
    .ready(function() {
        showViewPortSize(true);
    });
AnuRaj
quelle
Wenn Sie $ (window) .height () verwenden, erhalten Sie nicht die Größe des Ansichtsfensters, sondern die Größe des gesamten Fensters. Dies entspricht normalerweise der Größe des gesamten Dokuments, obwohl das Dokument möglicherweise noch größer ist.
AnuRaj
ideal für die Breite!
Marc
2

So ermitteln Sie die Größe des Ansichtsfensters beim Laden und beim Ändern der Größe (basierend auf der SimaWB-Antwort):

function getViewport() {
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();
    $('#viewport').html('Viewport: '+viewportWidth+' x '+viewportHeight+' px');
}

getViewport();

$(window).resize(function() {
    getViewport()
});
SandroMarques
quelle
1

Bitte beachten Sie, dass CSS3-Ansichtsfenstereinheiten (vh, vw) unter iOS nicht gut funktionieren. Wenn Sie durch die Seite scrollen, wird die Ansichtsfenstergröße irgendwie neu berechnet und Ihre Größe des Elements, das Ansichtsfenstereinheiten verwendet, nimmt ebenfalls zu. Eigentlich ist also etwas Javascript erforderlich.

DAH
quelle