web-dev-qa-db-fra.com

Obtenir les dimensions de la fenêtre d'affichage du navigateur avec JavaScript

Je souhaite offrir à mes visiteurs la possibilité de voir des images en haute qualité. Existe-t-il un moyen de détecter la taille de la fenêtre?

Ou mieux encore, la taille de la fenêtre d'affichage du navigateur avec JavaScript? Voir la zone verte ici:

javascriptcross-browserviewport
696
Alix Axel

Multi-navigateur @media (width) et @media (height) valeurs

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

window.innerWidth et .innerHeight

  • obtient fenêtre CSS@media (width) et @media (height) qui incluent des barres de défilement
  • initial-scale et zoom variations peuvent entraîner des valeurs mobiles à tort redimensionnez jusqu'à ce que PPK appelle viewport et soyez plus petit que les valeurs @media
  • zoom peut entraîner des valeurs 1px off en raison de l'arrondi natif
  • undefined dans IE8-

document.documentElement.clientWidth et .clientHeight

Ressources

1186
ryanve

fonctions de dimension jQuery

$(window).width() et $(window).height()

106
Scott Evernden

Vous pouvez utiliser les propriétés window.innerWidth et window.innerHeight .

innerHeight vs outerHeight

69
CMS

Si vous n'utilisez pas jQuery, cela devient moche. Voici un extrait qui devrait fonctionner sur tous les nouveaux navigateurs. Le comportement est différent en mode Quirks et en mode standard dans IE. Cela s'en occupe.

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

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

J'ai pu trouver une réponse définitive en JavaScript: The Definitive Guide, 6e édition, de O'Reilly, p. 391:

Cette solution fonctionne même en mode Quirks, contrairement à la solution actuelle de ryanve et ScottEvernden.

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

}

à part le fait que je me demande pourquoi la ligne if (document.compatMode == "CSS1Compat") n'est pas if (d.compatMode == "CSS1Compat"), tout est beau.

12
太極者無極而生

Je sais que la réponse est acceptable, mais je me suis heurté à une situation où clientWidth ne fonctionnait pas, car l'iPhone (du moins le mien) en renvoyait 980, et non 320, alors j'ai utilisé window.screen.width. Je travaillais sur un site existant, je devenais "réactif" et je devais obliger les grands navigateurs à utiliser un méta-viewport différent.

J'espère que cela aide quelqu'un, ce n'est peut-être pas parfait, mais cela fonctionne dans mes tests sur iOS et 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

J'ai cherché et trouvé une méthode de navigation croisée:

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

Il y a une différence entre window.innerHeight et document.documentElement.clientHeight. Le premier inclut la hauteur de la barre de défilement horizontale.

9
Szépe Viktor

Ce code provient de 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: pour lire la largeur, utilisez console.log('viewport width'+viewport().width);

9
Xavier Blondel

Si vous recherchez une solution non-jQuery donnant des valeurs correctes en pixels virtuels sur le mobile , et que vous pensez que plain window.innerHeight ou document.documentElement.clientHeight peut résoudre votre problème, veuillez d'abord étudier ce lien: https://tripleodeon.com/assets/2011/12/table.html

Le développeur a fait de bons tests qui révèlent le problème: vous pouvez obtenir des valeurs inattendues pour les écrans Android/iOS, Paysage/Portrait, Normal/Haute densité.

Ma réponse actuelle n’est pas encore la solution miracle (// todo), mais plutôt un avertissement à ceux qui vont rapidement copier-coller une solution donnée de ce fil dans le code de production.

Je cherchais la largeur de la page dans pixels virtuels sur mobile, et j'ai trouvé que le seul code qui fonctionne est (de manière inattendue!) window.outerWidth. J'examinerai plus tard ce tableau pour trouver la solution correcte en donnant la hauteur, à l'exclusion de la barre de navigation, lorsque j'en aurai le temps.

8
Dan

Une solution conforme aux normes du W3C consisterait à créer une division transparente (par exemple de manière dynamique avec JavaScript), à définir sa largeur et sa hauteur sur 100 vw/100vh (unités Viewport), puis à obtenir ses propriétés offsetWidth et offsetHeight. Après cela, l'élément peut être supprimé à nouveau. Cela ne fonctionnera pas dans les anciens navigateurs car les unités de la fenêtre de visualisation sont relativement nouvelles, mais si vous ne vous en souciez pas, mais plutôt des normes (à venir), vous pouvez certainement procéder ainsi:

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

Bien sûr, vous pouvez également définir objNode.style.position = "fixed" puis utiliser 100% comme largeur/hauteur - cela devrait avoir le même effet et améliorer dans une certaine mesure la compatibilité. Aussi, régler la position sur fixed pourrait être une bonne idée en général, car sinon la div sera invisible mais consommera un peu d’espace, ce qui entraînera l’affichage de barres de défilement, etc.

6
Firefall

C’est ce que je fais, j’ai essayé dans IE 8 -> 10, 35 FF, Chrome 40, cela fonctionnera de manière très fluide dans tous les navigateurs modernes (comme window.innerWidth est défini) et dans IE 8 (sans window.innerWidth), tout se passe bien, tout problème (comme le clignotement dû au débordement: "masqué"), signalez-le. La hauteur de la fenêtre d'affichage ne m'intéresse pas vraiment car j'ai créé cette fonction pour contourner certains outils réactifs, mais elle pourrait être implémentée. J'espère que cela vous aidera, j'apprécie vos commentaires et suggestions.

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