Wie kann ich windowWidth
, windowHeight
, pageWidth
, pageHeight
, screenWidth
, screenHeight
, pageX
, pageY
, screenX
, screenY
wird die in allen gängigen Browsern funktionieren?
javascript
jquery
layout
cross-browser
Turteltaube
quelle
quelle
Antworten:
Sie können die Größe des Fensters oder Dokuments mit jQuery ermitteln:
Für die Bildschirmgröße können Sie das
screen
Objekt verwenden:quelle
46
) anstelle einer Zeichenfolge wie css ('height') ("46px"
) zurück.Dies hat alles, was Sie wissen müssen: Ansichtsfenster / Fenstergröße abrufen
aber kurz gesagt:
Geige
Bitte hören Sie auf, diese Antwort zu bearbeiten. Es wurde jetzt 22 Mal von verschiedenen Personen bearbeitet, um ihren Vorlieben für das Codeformat zu entsprechen. Es wurde auch darauf hingewiesen, dass dies nicht erforderlich ist, wenn Sie nur moderne Browser ansprechen möchten - wenn ja, benötigen Sie nur Folgendes:
quelle
g = document.body
?document.body
.Hier ist eine browserübergreifende Lösung mit reinem JavaScript ( Quelle ):
quelle
body element
Wert einen Wert vonundefined
zurückgibt, da der Dom noch nicht geladen ist.Eine Nicht-jQuery-Methode zum Abrufen der verfügbaren Bildschirmdimension.
window.screen.width/height
wurde bereits erstellt, aber aus Gründen des reaktionsschnellen Webdesigns und der Vollständigkeit halte ich es für sinnvoll, diese Attribute zu erwähnen:http://www.quirksmode.org/dom/w3c_cssom.html#t10 :
quelle
window.screen.availHeight
scheint den Vollbildmodus anzunehmen, so dass der normale Bildschirmmodus das Scrollen erzwingt (getestet in Firefox und Chrome).window.screen.height
stattdessen verwenden.Aber wenn wir über reaktionsfähige Bildschirme sprechen und aus irgendeinem Grund mit jQuery damit umgehen möchten,
gibt die richtige Messung. Sogar der zusätzliche Platz in der Bildlaufleiste wird entfernt, und wir müssen uns nicht darum kümmern, diesen Platz anzupassen :)
quelle
window.innerWidth
undwindow.innerHeight
nicht die Größe der Bildlaufleiste berücksichtigen. Wenn Bildlaufleisten vorhanden sind, geben diese Methoden in fast allen Desktop-Browsern falsche Ergebnisse für die Fenstergröße zurück. Siehe stackoverflow.com/a/31655549/508355Sie können auch die Breite und Höhe des Fensters abrufen, um Browser-Symbolleisten und andere Dinge zu vermeiden. Es ist der wirklich nutzbare Bereich im Browserfenster .
Verwenden Sie dazu:
window.innerWidth
undwindow.innerHeight
properties ( siehe Dokument unter w3schools ).In den meisten Fällen ist es beispielsweise am besten, einen perfekt zentrierten schwebenden modalen Dialog anzuzeigen. Sie können damit Positionen im Fenster berechnen, unabhängig davon, welche Auflösungsausrichtung oder Fenstergröße der Browser verwendet.
quelle
quelle
So überprüfen Sie die Höhe und Breite Ihrer aktuell geladenen Seite einer Website mithilfe der "Konsole" oder nach dem Klicken auf "Überprüfen" .
Schritt 1 : Klicken Sie mit der rechten Maustaste auf "Inspizieren" und dann auf "Konsole".
Schritt 2 : Stellen Sie sicher, dass sich Ihr Browserbildschirm nicht im Maximierungsmodus befindet. Wenn sich der Browserbildschirm im Modus "Maximieren" befindet, müssen Sie zuerst auf die Schaltfläche "Maximieren" (entweder in der rechten oder linken oberen Ecke) klicken und die Maximierung aufheben.
Schritt 3 : Schreiben Sie nun nach dem Größer-als-Zeichen ('>') Folgendes:
quelle
Wenn Sie eine wirklich kugelsichere Lösung für die Breite und Höhe des Dokuments (das
pageWidth
undpageHeight
im Bild) benötigen , sollten Sie ein Plugin von mir, jQuery.documentSize, verwenden .Es hat nur einen Zweck: immer die richtige Dokumentgröße zurückzugeben, selbst in Szenarien, in denen jQuery und andere Methoden fehlschlagen . Trotz seines Namens müssen Sie nicht unbedingt jQuery verwenden - es ist in Vanille-Javascript geschrieben und funktioniert auch ohne jQuery .
Verwendungszweck:
für die globale
document
. Übergeben Sie für andere Dokumente, z. B. in einem eingebetteten Iframe, auf den Sie Zugriff haben, das Dokument als Parameter:Update: jetzt auch für Fensterabmessungen
Seit Version 1.1.0 verarbeitet jQuery.documentSize auch Fensterabmessungen.
Das ist notwendig, weil
$( window ).height()
ist in iOS fehlerhaft , bis es unbrauchbar wird$( window ).width()
und$( window ).height()
sind auf Mobilgeräten unzuverlässig, da sie die Auswirkungen des Zooms auf Mobilgeräten nicht bewältigen.jQuery.documentSize bietet
$.windowWidth()
und$.windowHeight()
, die diese Probleme lösen. Weitere Informationen finden Sie in der Dokumentation .quelle
Ich habe ein kleines Javascript-Lesezeichen geschrieben, mit dem Sie die Größe anzeigen können. Sie können es ganz einfach zu Ihrem Browser hinzufügen. Wenn Sie darauf klicken, wird die Größe in der rechten Ecke Ihres Browserfensters angezeigt.
Hier finden Sie Informationen zur Verwendung eines Lesezeichens https://en.wikipedia.org/wiki/Bookmarklet
Lesezeichen
Originalcode
Der ursprüngliche Code ist in Kaffee:
Grundsätzlich stellt der Code ein kleines Div voran, das aktualisiert wird, wenn Sie die Größe Ihres Fensters ändern.
quelle
In einigen Fällen, die mit dem reaktionsschnellen Layout zusammenhängen,
$(document).height()
können falsche Daten zurückgegeben werden, die nur die Höhe des Ansichtsports anzeigen. Wenn beispielsweise ein div # -Wrapper eine Höhe von 100% hat, kann dieser #wrapper um einen Block darin gedehnt werden. Die Höhe entspricht jedoch immer noch der Höhe des Ansichtsfensters. In einer solchen Situation könnten Sie verwendenDies entspricht der tatsächlichen Größe des Wrappers.
quelle
Vollständige Anleitung zu Bildschirmgrößen
JavaScript
Für höhe:
Hinweis: Wenn das Fenster maximiert ist, entspricht dies screen.availHeight
Für die Breite:
Jquery
Für höhe:
Für die Breite:
Referenz: https://help.optimizely.com/Build_Campaigns_and_Experiments/Use_screen_measurements_to_design_for_responsive_breakpoints
quelle
Ich habe eine Bibliothek entwickelt, um die tatsächliche Größe des Ansichtsfensters für Desktops und Handy-Browser zu ermitteln, da die Größe des Ansichtsfensters geräteübergreifend inkonsistent ist und sich nicht auf alle Antworten dieses Beitrags verlassen kann (nach all den diesbezüglichen Untersuchungen): https: // github .com / pyrsmk / W.
quelle
Manchmal müssen Sie die Änderungen von Breite und Höhe sehen, während Sie die Größe des Fensters und des inneren Inhalts ändern.
Dafür habe ich ein kleines Skript geschrieben, das ein Protokollfeld hinzufügt, das die Größenänderung dynamisch überwacht und fast sofort aktualisiert.
Es fügt einen gültigen HTML-Code mit fester Position und hohem Z-Index hinzu, ist jedoch klein genug, sodass Sie :
Getestet auf: Chrome 40, IE11, aber es ist sehr gut möglich, auch mit anderen / älteren Browsern zu arbeiten ... :)
BEARBEITEN: Jetzt werden Stile nur auf das Logger-Tabellenelement angewendet - nicht auf alle Tabellen - auch dies ist eine jQuery-freie Lösung :)
quelle
Mit der Einführung von
globalThis
in ES2020 können Sie Eigenschaften wie verwenden.Für die Bildschirmgröße:
Für Fenstergröße
Für Offset:
...& bald.
quelle
Sie können den Bildschirm verwenden Objekt verwenden, um dies zu erhalten.
Das Folgende ist ein Beispiel dafür, was es zurückgeben würde:
Um Ihre
screenWidth
Variable, nur nutzenscreen.width
, das gleiche mitscreenHeight
, würden Sie nur verwendenscreen.height
.Um Ihre Fensterbreite und Höhe zu erhalten, wäre es
screen.availWidth
oderscreen.availHeight
sind.Für die
pageX
undpageY
Variablen verwendenwindow.screenX or Y
. Beachten Sie, dass dies von SEHR LINKS / OBEN IHRES LINKS / OBEN-BILDSCHIRMS stammt . Wenn Sie also zwei Bildschirme mit einer Breite haben,1920
hat ein Fenster mit einer Größe von2420
500 Pixel links vom rechten Bildschirm einen X-Wert von (1920 + 500).screen.width/height
Zeigen Sie jedoch die Breite oder Höhe des Bildschirms CURRENT an.Verwenden Sie jQuery's
$(window).height()
oder, um die Breite und Höhe Ihrer Seite zu ermitteln$(window).width()
.Verwenden Sie wieder jQuery und verwenden Sie
$("html").offset().top
und$("html").offset().left
für IhrepageX
undpageY
Werte.quelle
Hier ist meine Lösung!
quelle
So habe ich es geschafft, die Bildschirmbreite in React JS Project zu ermitteln:
Wenn die Breite gleich 1680 ist, geben Sie 570 zurück, andernfalls geben Sie 200 zurück
Screen.availWidth
quelle