Ich möchte meinen Besuchern die Möglichkeit geben, Bilder in hoher Qualität zu sehen. Kann ich die Fenstergröße auf irgendeine Weise erkennen?
Oder noch besser, die Größe des Ansichtsfensters des Browsers mit JavaScript? Siehe Grünfläche hier:
javascript
cross-browser
viewport
Alix Axel
quelle
quelle
getComputedStyle
das erweitertehtml
Tag verwenden.Antworten:
Browserübergreifend
@media (width)
und@media (height)
Wertewindow.innerWidth
und.innerHeight
@media (width)
und zu@media (height)
denen auch Scrollbalkeninitial-scale
und Zoom - Variationen können die mobilen Werte führen zu falsch verringern, was PPK ruft die visuellen Darstellungs und kleiner sein als die@media
Werteundefined
in IE8-document.documentElement.clientWidth
und.clientHeight
@media (width)
und@media (height)
wenn es keine Bildlaufleiste gibtjQuery(window).width()
der jQuery ruft den Browser AnsichtsfensterRessourcen
matchMedia
, um genaue Abmessungen in jeder Einheit zu erhaltenquelle
$
durchverge
. Wenn Sie sich in jQuery integrieren möchten, tun Sie diesjQuery.extend(verge)
. Siehe: verge.airve.com/#static<!DOCTYPE html>
das oben auf der Seite haben müssen, damit der Code funktioniert.document.documentElement.clientHeight
die Seitenhöhe undwindow.innerHeight
die Höhe des Ansichtsfensters zurückgegeben . Großer Unterschied.jQuery-Dimensionsfunktionen
$(window).width()
und$(window).height()
quelle
$(window).height();
gibt 536 zurück, während$("html").height();
10599Sie können die Eigenschaften window.innerWidth und window.innerHeight verwenden.
quelle
document.documentElement.clientWidth
ist genauer und wird allgemeiner unterstützt alswindow.innerWidth
document.documentElement.clientWidth
die Breite des Ansichtsfensters an, während window.innerWidth mir die Dokumentbreite angibt. Ja, so herum.Wenn Sie jQuery nicht verwenden, wird es hässlich. Hier ist ein Ausschnitt, der auf allen neuen Browsern funktionieren sollte. Das Verhalten unterscheidet sich im Quirks-Modus und im Standard-Modus im IE. Das kümmert sich darum.
quelle
clientHeight
dasdocument.documentElement
Element, wodurch die Größe des Ansichtsfensters angegeben wird. Um die Dokumentgröße zu erhalten, müssten Sie dies tundocument.body.clientHeight
. Wie Chetan erklärt, gilt dieses Verhalten für moderne Browser. Es ist leicht zu testen. Öffnen Sie einfach eine Konsole und geben Siedocument.documentElement.clientHeight
mehrere geöffnete Registerkarten ein.Ich weiß, dass dies eine akzeptable Antwort hat, aber ich bin auf eine Situation gestoßen, in der
clientWidth
es nicht funktioniert hat, da das iPhone (zumindest meins) 980 und nicht 320 zurückgegeben hat, also habe ich es verwendetwindow.screen.width
. Ich habe an einer vorhandenen Site gearbeitet, wurde "reaktionsschnell" und musste größere Browser dazu zwingen, ein anderes Meta-Ansichtsfenster zu verwenden.Hoffe das hilft jemandem, es ist vielleicht nicht perfekt, aber es funktioniert in meinen Tests auf iOs und Android.
quelle
Ich habe einen browserübergreifenden Weg gesucht und gefunden:
quelle
Ich konnte eine endgültige Antwort in JavaScript finden: The Definitive Guide, 6. Ausgabe von O'Reilly, p. 391:
Diese Lösung funktioniert auch im Quirks-Modus, während die aktuelle Lösung von Ryanve und ScottEvernden dies nicht tut.
bis auf die Tatsache, dass ich mich frage, warum die Linie
if (document.compatMode == "CSS1Compat")
nicht istif (d.compatMode == "CSS1Compat")
, sieht alles gut aus.quelle
documentElement.clientWidth
reagiert nicht auf Änderungen der Geräteorientierung unter iOS. b) zeigt die Anzahl der physischen Pixel (praktisch nutzlos) anstelle der virtuellen Pixel anWenn Sie nach einer Nicht-jQuery-Lösung suchen , die auf Mobilgeräten korrekte Werte in virtuellen Pixeln liefert , und dies für einfach halten
window.innerHeight
oderdocument.documentElement.clientHeight
Ihr Problem lösen können, lesen Sie bitte zuerst diesen Link: https://tripleodeon.com/assets/2011/12/ table.htmlDer Entwickler hat gute Tests durchgeführt, die das Problem aufdecken: Sie können unerwartete Werte für Android / iOS-, Quer- / Hochformat-, Normal- / High-Density-Displays erhalten.
Meine aktuelle Antwort ist noch keine Silberkugel (// todo), sondern eine Warnung an diejenigen, die eine bestimmte Lösung aus diesem Thread schnell kopieren und in den Produktionscode einfügen möchten.
Ich habe nach der Seitenbreite in virtuellen Pixeln auf Mobilgeräten gesucht und festgestellt, dass der einzige funktionierende Code (unerwartet!) Ist
window.outerWidth
. Ich werde diese Tabelle später auf korrekte Lösung untersuchen und die Höhe ohne Navigationsleiste angeben, wenn ich Zeit habe.quelle
Dieser Code stammt von http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
NB: Um die Breite zu lesen, verwenden Sie
console.log('viewport width'+viewport().width);
quelle
Es gibt einen Unterschied zwischen
window.innerHeight
unddocument.documentElement.clientHeight
. Die erste enthält die Höhe der horizontalen Bildlaufleiste.quelle
Eine Lösung, die den W3C-Standards entspricht, besteht darin, ein transparentes Div (z. B. dynamisch mit JavaScript) zu erstellen, seine Breite und Höhe auf 100 VW / 100 VH (Ansichtsfenster-Einheiten) festzulegen und dann OffsetWidth und OffsetHeight abzurufen. Danach kann das Element wieder entfernt werden. Dies funktioniert in älteren Browsern nicht, da die Ansichtsfenstereinheiten relativ neu sind. Wenn Sie sich jedoch nicht für sie interessieren, sondern für (zukünftige) Standards, können Sie auf jeden Fall diesen Weg gehen:
Natürlich können Sie auch objNode.style.position = "fixed" setzen und dann 100% als Breite / Höhe verwenden - dies sollte den gleichen Effekt haben und die Kompatibilität in gewissem Maße verbessern. Außerdem kann es im Allgemeinen eine gute Idee sein, die Position auf fest zu setzen, da sonst das div unsichtbar ist, aber etwas Platz beansprucht, was dazu führt, dass Bildlaufleisten usw. angezeigt werden.
quelle
So mache ich es, ich habe es in IE 8 -> 10, FF 35, Chrome 40 versucht, es funktioniert sehr reibungslos in allen modernen Browsern (wie window.innerWidth definiert ist) und in IE 8 (ohne Fenster). innerWidth) es funktioniert auch reibungslos, jedes Problem (wie das Blinken wegen Überlaufs: "versteckt"), bitte melden Sie es. Ich bin nicht wirklich an der Höhe des Ansichtsfensters interessiert, da ich diese Funktion nur gemacht habe, um einige reaktionsfähige Tools zu umgehen, aber sie könnte implementiert sein. Hoffe es hilft, ich freue mich über Kommentare und Vorschläge.
quelle