Wie erhalte ich die Abmessungen des Browser-Ansichtsfensters?

789

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:

Alix Axel
quelle
10
Was ich tue, ist, ein Element in der Regel HTML auf 100% Höhe zu setzen und seine Höhe zu erhalten. Einfach funktioniert überall.
Muhammad Umer
1
@ MuhammadUmer guter Fang! Wenn Sie frustriert sind, die Abmessungen zu erhalten (und Sie werden es auf Mobiltelefonen ohne jQuery tun), können Sie getComputedStyledas erweiterte htmlTag verwenden.
Dan
Sie können auch die W- Bibliothek verwenden, die die browserübergreifende Erkennung von Ansichtsfenstern übernimmt;)
pyrsmk

Antworten:

1328

Browserübergreifend @media (width) und @media (height)Werte 

const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);

window.innerWidth und .innerHeight

  • bekommt CSS - Ansichtsfenster @media (width) und zu @media (height)denen auch Scrollbalken
  • initial-scaleund Zoom - Variationen können die mobilen Werte führen zu falsch verringern, was PPK ruft die visuellen Darstellungs und kleiner sein als die @mediaWerte
  • Durch das Zoomen können die Werte aufgrund der nativen Rundung um 1 Pixel verringert werden
  • undefined in IE8-

document.documentElement.clientWidth und .clientHeight

Ressourcen

Ryanve
quelle
4
@ 01100001 Ersetzen $durch verge. Wenn Sie sich in jQuery integrieren möchten, tun Sie dies jQuery.extend(verge). Siehe: verge.airve.com/#static
Ryanve
4
Ich wollte nur erwähnen, dass Sie in IE8 (und vielleicht auch in anderen) <!DOCTYPE html>das oben auf der Seite haben müssen, damit der Code funktioniert.
Tzury Bar Yochay
6
Ich bin nicht zufrieden mit clientWidth / Height auf Mobilgeräten, wirklich Tripleodeon.com/wp-content/uploads/2011/12/table.html
Dan
24
Wenn mir nichts fehlt, ist diese Antwort falsch. Zumindest in Chrome wird document.documentElement.clientHeightdie Seitenhöhe und window.innerHeightdie Höhe des Ansichtsfensters zurückgegeben . Großer Unterschied.
Nate
2
verschiedene Bildschirmgröße Variablen / Lösungen Live-Test: ryanve.com/lab/dimensions
Alex Pandrea
106

jQuery-Dimensionsfunktionen

$(window).width() und $(window).height()

Scott Evernden
quelle
60
@allyourcode, unmöglich, jQuery ist die Antwort auf alle .
Xeoncross
21
Dadurch wird nicht die Größe des Ansichtsfensters, sondern die Gesamtgröße des Dokuments angezeigt. Versuch es.
Alejandro García Iglesias
2
Für Browser, die ihre Addon-Symbolleisten als HTML mit fester Postitionierung anzeigen, funktioniert diese Lösung nicht, insbesondere wenn Sie sie in Ihren Code-Top-Positionierungen und Prozentsätzen verwenden möchten.
Adib Aroui
7
@AlejandroIglesias: Nein, ich habe es gerade auf dieser SO-Seite getestet. $(window).height();gibt 536 zurück, während $("html").height();10599
Flimm
2
Warnung: Diese Dimensionen enthalten keine Bildlaufleisten (die in verschiedenen Browsern und Plattformen unterschiedliche Größen haben) und stimmen daher nicht mit CSS-Medienabfragen überein. Andere Antworten hier lösen dieses Problem jedoch.
Spencer O'Reilly
75

Sie können die Eigenschaften window.innerWidth und window.innerHeight verwenden.

innerHeight vs OuterHeight

CMS
quelle
29
Auch wenn dies in IE +1 für Diagramm nicht funktioniert: D. Bei einer solchen Frage sollte es ein Verbrechen sein, nicht mehr davon zu haben.
Allyourcode
8
@CMS document.documentElement.clientWidthist genauer und wird allgemeiner unterstützt alswindow.innerWidth
Ryanve
6
@ryanve Wenn mit "genauer" gemeint ist "macht nicht einmal aus der Ferne das Gleiche", dann ja: P
Boxed
Firefox Beta? Das gehörte zum Museum.
Derek 5 會 功夫
@boxed Gibt in Mobile Safari document.documentElement.clientWidthdie Breite des Ansichtsfensters an, während window.innerWidth mir die Dokumentbreite angibt. Ja, so herum.
John
33

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.

var elem = (document.compatMode === "CSS1Compat") ? 
    document.documentElement :
    document.body;

var height = elem.clientHeight;
var width = elem.clientWidth;
Chetan Sastry
quelle
8
Gibt Ihnen dies nicht die Höhe der Seite, nicht das Ansichtsfenster? Das scheint auf dieser Seite anzugeben: developer.mozilla.org/en/DOM/element.clientHeight
allyourcode
4
Sie verwenden clientHeightdas document.documentElementElement, wodurch die Größe des Ansichtsfensters angegeben wird. Um die Dokumentgröße zu erhalten, müssten Sie dies tun document.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 Sie document.documentElement.clientHeightmehrere geöffnete Registerkarten ein.
Gajus
13

Ich weiß, dass dies eine akzeptable Antwort hat, aber ich bin auf eine Situation gestoßen, in der clientWidthes nicht funktioniert hat, da das iPhone (zumindest meins) 980 und nicht 320 zurückgegeben hat, also habe ich es verwendet window.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.

//sweet hack to set meta viewport for desktop sites squeezing down to mobile that are big and have a fixed width 
  //first see if they have window.screen.width avail
  (function() {
    if (window.screen.width)
    {
      var setViewport = {
        //smaller devices
        phone: 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no',
        //bigger ones, be sure to set width to the needed and likely hardcoded width of your site at large breakpoints  
        other: 'width=1045,user-scalable=yes',
        //current browser width
        widthDevice: window.screen.width,
        //your css breakpoint for mobile, etc. non-mobile first
        widthMin: 560,
        //add the tag based on above vars and environment 
        setMeta: function () {
          var params = (this.widthDevice <= this.widthMin) ? this.phone : this.other; 
          var head = document.getElementsByTagName("head")[0];
          var viewport = document.createElement('meta');
          viewport.setAttribute('name','viewport');
          viewport.setAttribute('content',params);
          head.appendChild(viewport);
        }
      }
      //call it 
      setViewport.setMeta();
    }
  }).call(this);
Jazzy
quelle
13

Ich habe einen browserübergreifenden Weg gesucht und gefunden:

function myFunction(){
  if(window.innerWidth !== undefined && window.innerHeight !== undefined) { 
    var w = window.innerWidth;
    var h = window.innerHeight;
  } else {  
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
  }
  var txt = "Page size: width=" + w + ", height=" + h;
  document.getElementById("demo").innerHTML = txt;
}
<!DOCTYPE html>
<html>
  <body onresize="myFunction()" onload="myFunction()">
   <p>
    Try to resize the page.
   </p>
   <p id="demo">
    &nbsp;
   </p>
  </body>
</html>

user2921779
quelle
Beachten Sie, dass die Verwendung eines Iframes durch Stackoverflow, der das Code-Snippet umgibt, das Ergebnis durcheinander bringt
Miller,
11

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.

function getViewportSize(w) {

    // Use the specified window or the current window if no argument
    w = w || window;

    // This works for all browsers except IE8 and before
    if (w.innerWidth != null) return { w: w.innerWidth, h: w.innerHeight };

    // For IE (or any browser) in Standards mode
    var d = w.document;
    if (document.compatMode == "CSS1Compat")
        return { w: d.documentElement.clientWidth,
           h: d.documentElement.clientHeight };

    // For browsers in Quirks mode
    return { w: d.body.clientWidth, h: d.body.clientHeight };

}

bis auf die Tatsache, dass ich mich frage, warum die Linie if (document.compatMode == "CSS1Compat")nicht ist if (d.compatMode == "CSS1Compat"), sieht alles gut aus.

Unpolarität
quelle
Sprechen Sie über das Retina-Display oder Landscape vs Portrait oder das Meta-Ansichtsfenster-Tag? Du meinst nicht virtuelle Pixel wie in snowdragonledhk.com/… ?
Unpolarität
1) Wenn es um hochauflösende Anzeigen geht, meine ich die hier erläuterten virtuellen Pixel: stackoverflow.com/a/14325619/139361 . Jeder iPhone-Bildschirm ist genau 320 virtuelle Pixel breit. 2) Ich sage Folgendes: a) documentElement.clientWidthreagiert nicht auf Änderungen der Geräteorientierung unter iOS. b) zeigt die Anzahl der physischen Pixel (praktisch nutzlos) anstelle der virtuellen Pixel an
Dan,
11

Wenn 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.innerHeightoder document.documentElement.clientHeightIhr Problem lösen können, lesen Sie bitte zuerst diesen Link: https://tripleodeon.com/assets/2011/12/ table.html

Der 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.

Dan
quelle
10

Dieser Code stammt von http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

NB: Um die Breite zu lesen, verwenden Sie console.log('viewport width'+viewport().width);

Xavier Blondel
quelle
9

Es gibt einen Unterschied zwischen window.innerHeightund document.documentElement.clientHeight. Die erste enthält die Höhe der horizontalen Bildlaufleiste.

Szépe Viktor
quelle
1
Haben Sie Ihre Antwort unter verschiedenen Betriebssystemen, auf Retina-Displays und im Quer- / Hochformat getestet? Dieser Link deckt ziemlich veraltete Systeme ab, aber er beweist, dass Ihr Code nicht funktioniert: Tripleodeon.com/wp-content/uploads/2011/12/table.html
Dan
6

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:

var objNode = document.createElement("div");
objNode.style.width  = "100vw";
objNode.style.height = "100vh";
document.body.appendChild(objNode);
var intViewportWidth  = objNode.offsetWidth;
var intViewportHeight = objNode.offsetHeight;
document.body.removeChild(objNode);

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.

Feuerfall
quelle
Leider zerstört die Realität Ihre "W3C - Standardlösung" vollständig: 1) caniuse.com/viewport-units , 2) caniuse.com/#feat=css-fixed . Was Entwickler brauchen, ist die Lösung, die funktioniert, nicht "sollte theoretisch funktionieren".
Dan
Wenn wir uns auf die Standards verlassen können, brauchen wir nicht einmal all diese browserübergreifenden Lösungen. Eine Lösung, die auf die Spezifikation antwortet, ist keine Lösung.
Derek 5 會 功夫
3

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.

function viewportWidth () {
  if (window.innerWidth) return window.innerWidth;
  var
  doc = document,
  html = doc && doc.documentElement,
  body = doc && (doc.body || doc.getElementsByTagName("body")[0]),
  getWidth = function (elm) {
    if (!elm) return 0;
    var setOverflow = function (style, value) {
      var oldValue = style.overflow;
      style.overflow = value;
      return oldValue || "";
    }, style = elm.style, oldValue = setOverflow(style, "hidden"), width = elm.clientWidth || 0;
    setOverflow(style, oldValue);
    return width;
  };
  return Math.max(
    getWidth(html),
    getWidth(body)
  );
}
manolinjr81
quelle