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

Wie kann ich jQuery verwenden, um zu bestimmen, die Größe des browser-Viewports, und zu erkennen, wenn die Seite geändert wird? Ich brauche, um ein IFRAME-Größe in diesem Raum (kommt ein wenig auf die Ränder).

Für diejenigen, die nicht wissen, die browser-viewport ist nicht die Größe des Dokuments/Seite. Es ist das sichtbare Größe Ihrer Fenster vor den Blättern.

InformationsquelleAutor der Frage Volomike | 2010-06-15

467

Um die Breite und Höhe des viewport:

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

resize-Ereignis der Seite:

$(window).resize(function() {

});

InformationsquelleAutor der Antwort SimaWB

38

Können Sie versuchen, viewport-Einheiten (CSS3):
```
div { 
  height: 95vh; 
  width: 95vw; 
}
```
Browser-Unterstützung

InformationsquelleAutor der Antwort Vitalii Fedorenko
24

1. Antwort auf die wichtigste Frage

Skript $(window).height() funktioniert gut (mit der viewport-Höhe und nicht das Dokument mit Blättern Höhe), ABER es muss, dass Sie richtig die doctype-Tags in Ihrem Dokument, zum Beispiel diese doctypes:

Für HTML 5:

<!DOCTYPE html>

Übergangszeit für HTML4:

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

Wahrscheinlich die Standard-doctype-Deklaration angenommen, die von einigen Browsern ist es so, dass $(window).height() nimmt das Dokument die Höhe und nicht der browser die Höhe. Mit der doctype-Angabe, es ist zufriedenstellend gelöst, und ich bin mir ziemlich sicher, dass Sie peps vermeiden Sie das "ändern der scroll-overflow auf hidden und dann zurück", der ist, tut mir Leid, ein bisschen schmutziger trick, besonders, wenn du nicht aufschreibst, ist es auf den code für zukünftige Programmierer Verwendung.

2. Ein weiterer Tipp, Hinweis beiseite:
Außerdem, wenn Sie dabei sind, ein Skript können Sie erfinden tests, um Programmierern zu helfen, sich mit Ihrem Bibliotheken, lassen Sie mich erfinden ein paar:

~~$(document).bereit(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");
      } 
```
~~});~~

EDIT: über den Teil 2", Ein weiterer Tipp, Hinweis beiseite":
@Machiel, im gestrigen Kommentar (2014-09-04), war GANZ und gar Recht: die überprüfung der $ kann nicht in der ready-Ereignis von Jquery, weil wir sind, wie er wies darauf hin, vorausgesetzt, $ bereits definiert. DANKE FÜR den Hinweis, und bitte den rest von Euch Lesern korrigieren Sie dies, wenn Sie es in Ihren Skripts. Mein Vorschlag ist: in den Bibliotheken setzen "install_script()" Funktion initialisiert die Bibliothek (jede Referenz auf $, die in einem solchen init-Funktion, einschließlich der Erklärung von ready()) und AM ANFANG eines solchen "install_script ()" - Funktion, prüfen Sie, ob die $ definiert ist, aber alles unabhängig von JQuery, so dass Ihre Bibliothek kann die diagnose selbst", wenn JQuery noch nicht definiert. Ich bevorzuge diese Methode, anstatt zwingen, die automatische Erstellung von JQuery bringt es, von einem CDN. Das sind kleine Notizen beiseite für die Unterstützung aus anderen Programmierern. Ich denke, dass die Leute, die Bibliotheken müssen die reicheren in der feedback zu möglichen programmer ' s Fehler. Zum Beispiel, Google-Apis benötigen neben einer Anleitung zum verstehen der Fehlermeldungen. Das ist absurd, um externe Dokumentation für einige kleine Fehler, die Sie nicht benötigen, dass Sie gehen und Suche ein Handbuch oder eine Spezifikation. Die Bibliothek muss sich SELBST DOKUMENTIERT. Ich code schreiben, der sogar kümmert sich um die Fehler, die ich Begehen könnten sogar sechs Monate ab jetzt, und es immer noch versucht, eine saubere und nicht-repetitive code, der bereits geschrieben-zu-verhindern-Zukunft-developer-Fehler.

InformationsquelleAutor der Antwort David L
5

Können Sie die $(window).resize() um zu ermitteln, wenn der viewport verkleinert.

jQuery keine Funktion, um konsequent zu erkennen, die richtig Breite und Höhe des viewport[1], wenn es eine scroll-Leiste vorhanden.

Fand ich eine Lösung, verwendet die Modernizr-Bibliothek und speziell die mq-Funktion öffnet die media queries für javascript.

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 helfen, ändern der Größe eines iframe auf 100% viewport-Breite mit einem Rand auf jeder Seite, aber ich hoffe, es wird einen Trost für webdevelopers frustriert mit browser Inkohärenz der javascript-viewport-Breite und Höhe Berechnung.

Vielleicht könnte dies helfen, mit Bezug auf die iframe:
```
$('iframe').css('width', '100%').wrap('<div style="margin:2em"></div>');
```
[1] können Sie die $(window).width() und $(window).Höhe (), um eine Zahl, die korrekt, wird in einigen Browsern, aber falsch in anderen. In diesen Browsern können Sie versuchen, verwenden Fenster.innerWidth und window.innerHeight, um die richtige Breite und Höhe, aber ich würde Ratschläge gegen diese Methode, weil Sie sich darauf verlassen, dass user-agent-sniffing.

In der Regel die verschiedenen Browser sind inkonsistent über ob oder nicht Sie gehören der scrollbar als Teil der Fensterbreite und-Höhe.

Hinweis: $(window).width () - und window.innerWidth variieren zwischen Betriebssystemen mit dem gleichen browser.
Siehe: https://github.com/eddiemachado/bones/issues/468#issuecomment-23626238

InformationsquelleAutor der Antwort forsvunnet
1

Bitte beachten Sie, dass CSS3-viewport-Einheiten (vh,vw) nicht spielen würde, sowie auf iOS, Wenn Sie die Seite scrollen, viewport-Größe ist irgendwie neu berechnet und Ihre Größe von element, das verwendet viewport-units auch erhöht. Also, eigentlich etwas javascript erforderlich.

InformationsquelleAutor der Antwort D.A.H

Bekommen Größe des Viewports auf laden und auf Größe (basierend auf SimaWB Antwort):

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

getViewport();

$(window).resize(function() {
    getViewport()
});

InformationsquelleAutor der Antwort SandroMarques

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);
    });

InformationsquelleAutor der Antwort AnuRaj

-3

Für die mobile Nutzung:
```
    screen.availWidth or screen.availHeight
```
InformationsquelleAutor der Antwort user2573644

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.