Obtenez les dimensions de fenêtre de navigateur avec JavaScript

StackOverflow https://stackoverflow.com/questions/1248081

Question

Je veux offrir à mes visiteurs la possibilité de voir des images en haute qualité, est-il possible que je peux détecter la taille de la fenêtre?

Ou mieux encore, la taille de la fenêtre du navigateur avec JavaScript? Voir espace vert ici:

Était-ce utile?

La solution

Cross-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

document.documentElement.clientWidth et .clientHeight

Ressources

Autres conseils

fonctions de dimension jQuery

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

Si vous ne l'utilisez jQuery, il devient laid. Voici un extrait qui devrait fonctionner sur tous les nouveaux navigateurs. Le comportement est différent en mode Quirks et mode standard dans IE. Cela prend soin. 

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

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

Je suis en mesure de trouver une réponse définitive en JavaScript: The Definitive Guide, 6e édition par O'Reilly, p. 391:

Cette solution fonctionne même en mode Quirks, alors que ryanve et la solution actuelle de ScottEvernden ne le font pas. 

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

}

à l'exception du fait que je me demande pourquoi la if (document.compatMode == "CSS1Compat") ligne n'est pas if (d.compatMode == "CSS1Compat"), tout semble bon.

Je sais que cela a une réponse acceptable, mais je suis tombé sur une situation où clientWidth ne fonctionne pas, comme l'iPhone (au moins le mien) est retourné 980, pas 320, donc j'utilisé window.screen.width. Je travaillais sur un site existant, étant fait « sensibles » et nécessaire pour forcer les navigateurs plus grands à utiliser une autre méta-fenêtre.

Espérons que cela aide quelqu'un, il ne peut pas être parfait, mais il travaille 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);

J'ai regardé et trouvé un moyen croix navigateur: 

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>

Ce code est de http://andylangton.co.uk / articles / javascript / get-viewport taille-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, l'utilisation console.log('viewport width'+viewport().width);

Il y a une différence entre window.innerHeight et document.documentElement.clientHeight. La première comprend la hauteur de la barre de défilement horizontal.

Si vous êtes à la recherche d'une solution non-jQuery qui donne des valeurs correctes en pixels virtuels sur mobile , et vous pensez que window.innerHeight simple ou document.documentElement.clientHeight peut résoudre votre problème, s'il vous plaît étudier ce lien premier: https://tripleodeon.com/assets/2011/12/table.html

Le développeur a fait un bon test qui révèle le problème: vous pouvez obtenir des valeurs inattendues pour Android / iOS, paysage / portrait, affiche normale densité / haute.

Ma réponse actuelle n'est pas encore balle d'argent (// todo), mais plutôt un avertissement à ceux qui vont copier-coller rapidement 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 je l'ai trouvé le seul code de travail est (de façon inattendue!) window.outerWidth. Je vais examiner plus tard ce tableau pour une solution correcte donnant hauteur hors barre de navigation, quand j'ai le temps.

Une solution qui serait conforme aux normes du W3C serait de créer un div transparent (par exemple de manière dynamique avec JavaScript), définir sa largeur et la hauteur de 100vw / 100vh (unités de visualisation) et ensuite obtenir son offsetWidth et offsetHeight. Après cela, l'élément peut être retiré à nouveau. Cela ne fonctionnera pas dans les anciens navigateurs, car les unités de fenêtres sont relativement nouveaux, mais si vous ne se soucient pas eux, mais plutôt sur les normes, (bientôt à être), vous pouvez certainement aller de cette façon: 

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 = « fixe », puis utiliser 100% en largeur / hauteur - cela devrait avoir le même effet et d'améliorer la compatibilité dans une certaine mesure. En outre, la position de réglage fixe pourrait être une bonne idée en général, parce que sinon la div sera invisible mais consomment un peu d'espace, ce qui conduira à des barres de défilement apparaissent etc.

Ceci est la façon dont je le fais, je l'ai essayé dans IE 8 -> 10, FF 35, Chrome 40, il fonctionnera très bien dans tous les navigateurs modernes (comme window.innerWidth est définie) et dans IE 8 (avec pas window.innerWidth), il fonctionne en douceur et, toute question (comme clignotant à cause de trop-plein: « caché »), s'il vous plaît le signaler. Je ne suis pas vraiment intéressé à la hauteur de la fenêtre que je fait cette fonction juste pour contourner des outils adaptés, mais il pourrait être mis en œuvre. Espérons que cela aide, j'apprécie les 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)
  );
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top