webentwicklung-frage-antwort-db.com.de

Abrufen der Browser-Ansichtsfenster-Abmessungen mit JavaScript

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 Darstellungsgröße des Browsers mit JavaScript? Siehe Grünfläche hier:

javascriptcross-browserviewport
696
Alix Axel

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

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

window.innerWidth und .innerHeight

  • ruft CSS-Ansichtsfenster@media (width) und @media (height) ab, die Bildlaufleisten enthalten
  • initial-scale und zoom Variationen können zu mobilen Werten führen zu Unrecht Skalieren Sie auf das, was PPK als visuelles Ansichtsfenster bezeichnet, und seien Sie kleiner als die @media Werte
  • der Zoom kann dazu führen, dass die Werte aufgrund der systemeigenen Rundung um 1 Pixel abweichen
  • undefined in IE8-

document.documentElement.clientWidth und .clientHeight

Ressourcen

1186
ryanve

jQuery-Dimensionsfunktionen

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

106
Scott Evernden

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

innerHeight vs outerHeight

69
CMS

Wenn Sie jQuery nicht verwenden, wird es hässlich. Hier ist ein Ausschnitt, der auf allen neuen Browsern funktionieren sollte. Das Verhalten ist im Quirks-Modus und im Standardmodus im IE unterschiedlich. Das kümmert sich darum.

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

var height = elem.clientHeight;
var width = elem.clientWidth;
31
Chetan Sastry

In JavaScript konnte ich eine endgültige Antwort finden: The Definitive Guide, 6. Auflage von O'Reilly, S. 22. 391

Diese Lösung funktioniert sogar im Quirks-Modus, während dies bei der aktuellen Lösung von ryanve und ScottEvernden nicht der Fall ist.

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 Zeile if (document.compatMode == "CSS1Compat") nicht if (d.compatMode == "CSS1Compat") ist, sieht alles gut aus.

12
太極者無極而生

Ich weiß, dass dies eine akzeptable Antwort ist, aber ich bin auf eine Situation gestoßen, in der clientWidth nicht funktioniert hat, da das iPhone (zumindest meins) 980 und nicht 320 zurückgab, also habe ich window.screen.width verwendet. Ich arbeitete an einer vorhandenen Website, die "reaktionsschnell" gemacht wurde, und musste größere Browser 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);
12
Jazzy

Ich habe gesucht und einen Cross-Browser-Weg 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>
10
user2921779

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

9
Szépe Viktor

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, benutzen Sie console.log('viewport width'+viewport().width);

9
Xavier Blondel

Wenn Sie nach einer Nicht-jQuery-Lösung suchen , die auf Mobilgeräten korrekte Werte in virtuellen Pixeln angibt , und Sie denken, dass window.innerHeight oder document.documentElement.clientHeight kann Ihr Problem lösen, lesen Sie 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-Anzeigen erhalten.

Meine aktuelle Antwort ist noch keine Silberkugel (// todo), sondern eine Warnung an diejenigen, die eine bestimmte Lösung aus diesem Thread schnell in den Produktionscode kopieren und einfügen werden.

Ich habe auf Mobilgeräten nach der Seitenbreite in virtuellen Pixeln gesucht und festgestellt, dass der einzige funktionierende Code (unerwartet!) window.outerWidth ist. Ich werde diese Tabelle später auf die richtige Lösung mit Angabe der Höhe ohne Navigationsleiste untersuchen, wenn ich Zeit habe.

8
Dan

Eine Lösung, die den W3C-Standards entspricht, besteht darin, ein transparentes Div zu erstellen (z. B. dynamisch mit JavaScript), seine Breite und Höhe auf 100 VW/100 VH (Ansichtsfenster-Einheiten) festzulegen und dann seine Werte für offsetWidth und offsetHeight abzurufen. Danach kann das Element wieder entfernt werden. Dies funktioniert in älteren Browsern nicht, da die Ansichtsfenster-Einheiten relativ neu sind. Wenn Sie sich jedoch nicht für sie interessieren, sondern für (zukünftige) Standards, können Sie auf jeden Fall folgendermaßen vorgehen:

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. Das Festlegen der Position kann im Allgemeinen eine gute Idee sein, da sonst das div unsichtbar ist, aber etwas Platz in Anspruch nimmt, was dazu führt, dass Bildlaufleisten usw. angezeigt werden.

6
Firefall

So mache ich das, ich habe es in IE 8 -> 10, FF 35, Chrome 40 versucht, es wird in allen modernen Browsern (wie window.innerWidth) sehr reibungslos funktionieren ist definiert) und in IE 8 (ohne window.innerWidth) funktioniert es auch reibungslos, jedes Problem (wie das Flashen wegen Überlauf: "versteckt"), bitte melden Sie es. Ich bin nicht wirklich an der Höhe des Ansichtsfensters interessiert, da ich diese Funktion gemacht habe, um einige reaktionsfähige Tools zu umgehen, aber sie könnte implementiert werden. 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)
  );
}
3
manolinjr81