it-swarm.com.de

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

Wie kann ich jQuery verwenden, um die Größe des Browser-Ansichtsfensters zu bestimmen und dies erneut zu erkennen, wenn die Größe der Seite geändert wird? Ich muss eine IFRAME-Größe in dieses Feld einfügen (kommt an jedem Rand ein wenig rein).

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

303
Volomike

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

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

größe des Ereignisses der Seite ändern:

$(window).resize(function() {

});
479
SimaWB

Sie können versuchen Ansichtsfenster-Einheiten (CSS3):

div { 
  height: 95vh; 
  width: 95vw; 
}

Browser-Unterstützung

39

1. Antwort auf die Hauptfrage

Das Skript $(window).height() funktioniert gut (es zeigt die Höhe des Ansichtsfensters und nicht das Dokument mit Bildlaufhöhe), ABER Sie müssen das doctype-Tag in Ihrem Dokument korrekt einfügen, zum Beispiel die folgenden 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 so, dass $(window).height() die Höhe des Dokuments und nicht die Höhe des Browsers annimmt. Mit der Doctype-Spezifikation ist es zufriedenstellend gelöst, und ich bin mir ziemlich sicher, dass Sie es vermeiden, den "Scroll-Overflow in Hidden und dann wieder zurück" zu ändern. 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 außerdem ein Skript erstellen, können Sie Tests erfinden, die Programmierern bei der Verwendung Ihrer Bibliotheken helfen. Lassen Sie mich ein paar davon erfinden:

$ (document) .ready (function () {

      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: zu Teil 2, "Ein ZUSÄTZLICHER Tipp, beiseite beachten": @Machiel hatte in dem gestrigen Kommentar (04.09.2014) VOLLSTÄNDIG Recht: Der Check des $ kann nicht innerhalb des Ready-Ereignisses von Jquery sein, weil Wir gehen davon aus, dass $ bereits definiert ist. DANKE, DASS SIE DIES AUSGEZEICHNET HABEN. Bitte korrigieren Sie dies, wenn Sie es in Ihren Skripten verwendet haben. Mein Vorschlag ist: In Ihre Bibliotheken eine "install_script ()" - Funktion einfügen, die die Bibliothek initialisiert (einen Verweis auf $ in eine solche init-Funktion einfügen, einschließlich der Deklaration von ready ()) und AT THE BEGINNEN Sie mit einer solchen "install_script ()" - Funktion, prü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 von zu erzwingen Eine JQuery, die es von einem CDN bringt. Dies sind winzige Notizen, um anderen Programmierern zu helfen. Ich denke, dass Leute, die Bibliotheken erstellen, mehr Rückmeldungen zu möglichen Programmiererfehlern haben müssen. Zum Beispiel benötigen Google Apis ein Handbuch zur Seite, um den Fehler zu verstehen Es ist absurd, externe Dokumentation für einige winzige Fehler zu benötigen, bei denen Sie nicht ein Handbuch oder eine Spezifikation durchsuchen müssen. Die Bibliothek muss SELBST DOKUMENTIERT sein. Ich schreibe Code, selbst wenn ich mich um die Fehler kümmere, die ich möglicherweise begangen habe ein halbes Jahr ab n Nun, und es versucht immer noch, ein sauberer und sich nicht wiederholender Code zu sein, der bereits geschrieben wurde, um zukünftige Entwicklerfehler zu verhindern.

25
David L

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] zu ermitteln, 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% Ansichtsfensterbreite mit einem Rand auf jeder Seite zu ändern, aber ich hoffe, dass sie Webentwicklern Trost bieten wird, die frustriert sind über die Inkohärenz der JavaScript-Ansichtsfensterbreiten- und -höhenberechnung durch den Browser.

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

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

[1] Sie können $ (window) .width () und $ (window) .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 sich auf User Agent Sniffing stützt.

Normalerweise stimmen die verschiedenen Browser nicht überein, ob sie die Bildlaufleiste als Teil der Fensterbreite und -höhe einschließen 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

5
forsvunnet
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);
    });
2
AnuRaj

So erhalten Sie die Größe des Ansichtsfensters bei Laden und bei Ä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()
});
1
SandroMarques

Bitte beachten Sie, dass CSS3-Ansichtsfenster-Einheiten (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 Ansichtsfenster-Einheiten verwendet, nimmt ebenfalls zu. Also, eigentlich ist etwas Javascript erforderlich.

1
D.A.H