Wie erhalte ich die Abmessungen des Browser-Ansichtsfensters?

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:

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

• entspricht der Breite des CSS-Ansichtsfensters minus der Breite der Bildlaufleiste
• stimmt überein @media (width)und @media (height)wenn es keine Bildlaufleiste gibt
• gleiche wie jQuery(window).width() der jQuery ruft den Browser Ansichtsfenster
• verfügbarer Cross-Browser
• ungenau, wenn der Doctype fehlt

Ressourcen

• Live-Ausgänge für verschiedene Dimensionen
• Verge verwendet browserübergreifende Ansichtsfenstertechniken
• tatsächliche VerwendungmatchMedia, um genaue Abmessungen in jeder Einheit zu erhalten

jQuery-Dimensionsfunktionen

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

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

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;

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

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>

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.

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.

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

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

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.

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