Come ottenere le dimensioni della finestra del browser?

Voglio offrire ai miei visitatori la possibilità di vedere immagini in alta qualità, esiste un modo per rilevare le dimensioni della finestra?

O meglio, la dimensione del viewport del browser con JavaScript? Vedi l'area verde qui:

Cross-browser @media (width) e @media (height)valori 

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

window.innerWidth e .innerHeight

• ottiene il viewport CSS @media (width) e @media (height)che includono barre di scorrimento
• initial-scalee le variazioni di zoom possono causare un ridimensionamento errato dei valori mobili a ciò che PPK chiama il visual viewport ed essere più piccolo dei @mediavalori
• lo zoom potrebbe causare uno scarto di 1px a causa dell'arrotondamento nativo
• undefined in IE8-

document.documentElement.clientWidth e .clientHeight

• è uguale alla larghezza della finestra CSS meno la larghezza della barra di scorrimento
• corrispondenze @media (width)e @media (height)quando non è presente la barra di scorrimento
• uguale a jQuery(window).width() quale jQuery chiama la vista del browser
• disponibile tra browser
• impreciso se manca doctype

risorse

• Uscite live per varie dimensioni
• verge utilizza tecniche di viewport tra browser
• usi realimatchMedia per ottenere dimensioni precise in qualsiasi unità

Funzioni di dimensione jQuery

$(window).width() e $(window).height()

È possibile utilizzare le proprietà window.innerWidth e window.innerHeight .

Se non stai usando jQuery, diventa brutto. Ecco uno snippet che dovrebbe funzionare su tutti i nuovi browser. Il comportamento è diverso in modalità Quirks e modalità standard in IE. Questo se ne occupa.

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

var height = elem.clientHeight;
var width = elem.clientWidth;

So che ha una risposta accettabile, ma mi sono imbattuto in una situazione in cui clientWidthnon ha funzionato, dato che iPhone (almeno il mio) ha restituito 980, non 320, quindi l'ho usato window.screen.width. Stavo lavorando su un sito esistente, essendo stato "responsive" e avevo bisogno di forzare browser più grandi a utilizzare un meta-viewport diverso.

Spero che questo aiuti qualcuno, potrebbe non essere perfetto, ma funziona nei miei test su iOS e 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);

Ho cercato e trovato una modalità cross browser:

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>

Sono riuscito a trovare una risposta definitiva in JavaScript: The Definitive Guide, 6th Edition di O'Reilly, p. 391:

Questa soluzione funziona anche in modalità Quirks, mentre l'attuale soluzione di ryanve e ScottEvernden no.

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

}

tranne per il fatto che mi chiedo perché la linea if (document.compatMode == "CSS1Compat")non lo sia if (d.compatMode == "CSS1Compat"), tutto sembra a posto.

Se stai cercando una soluzione non jQuery che fornisca valori corretti in pixel virtuali su dispositivi mobili e pensi che sia semplice window.innerHeighto in document.documentElement.clientHeightgrado di risolvere il tuo problema, ti preghiamo di studiare prima questo link: https://tripleodeon.com/assets/2011/12/ table.html

Lo sviluppatore ha effettuato buoni test che rivelano il problema: è possibile ottenere valori imprevisti per display Android / iOS, orizzontale / verticale, normale / alta densità.

La mia risposta attuale non è ancora Silver Bullet (// todo), ma piuttosto un avvertimento per coloro che stanno per copiare e incollare rapidamente qualsiasi soluzione data da questo thread nel codice di produzione.

Stavo cercando la larghezza della pagina in pixel virtuali su dispositivo mobile e ho scoperto che l'unico codice funzionante è (inaspettatamente!) window.outerWidth. Esaminerò più avanti questa tabella per la soluzione corretta che fornisce l'altezza esclusa la barra di navigazione, quando ho tempo.

Questo codice è tratto da 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: per leggere la larghezza, utilizzare console.log('viewport width'+viewport().width);

C'è una differenza tra window.innerHeighte document.documentElement.clientHeight. Il primo include l'altezza della barra di scorrimento orizzontale.

Una soluzione conforme agli standard W3C sarebbe quella di creare un div trasparente (ad esempio dinamicamente con JavaScript), impostarne la larghezza e l'altezza su 100vw / 100vh (unità Viewport) e quindi ottenere offsetWidth e offsetHeight. Successivamente, l'elemento può essere rimosso di nuovo. Questo non funzionerà nei browser più vecchi perché le unità viewport sono relativamente nuove, ma se invece non ti interessano di loro, ma piuttosto degli standard (che saranno presto), potresti sicuramente procedere in questo modo:

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

Ovviamente, puoi anche impostare objNode.style.position = "fixed" e quindi usare il 100% come larghezza / altezza - questo dovrebbe avere lo stesso effetto e migliorare la compatibilità in una certa misura. Inoltre, impostare la posizione su fixed potrebbe essere una buona idea in generale, perché altrimenti il ​​div sarà invisibile ma consumerà un po 'di spazio, il che porterà alla comparsa di barre di scorrimento, ecc.

Questo è il modo in cui lo faccio, l'ho provato in IE 8 -> 10, FF 35, Chrome 40, funzionerà molto bene in tutti i browser moderni (come viene definito window.innerWidth) e in IE 8 (senza finestra. innerWidth) funziona perfettamente, qualsiasi problema (come il flashing a causa di overflow: "nascosto"), per favore segnalalo. Non sono molto interessato all'altezza del viewport poiché ho creato questa funzione solo per aggirare alcuni strumenti reattivi, ma potrebbe essere implementato. Spero che sia d'aiuto, apprezzo commenti e suggerimenti.

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