Question Obtenir les dimensions de la fenêtre du navigateur avec JavaScript


Je veux offrir à mes visiteurs la possibilité de voir des images de haute qualité, y a-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:


597
2017-08-08 05:54


origine


Réponses:


Navigateur croisé  @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 CSS viewport  @media (width) et @media (height) qui incluent les barres de défilement
  • initial-scale et zoom variations peut provoquer des valeurs mobiles à à tort réduire à ce que PPK appelle le vue visuelle et être plus petit que le @media valeurs
  • zoom peut entraîner l'extinction de 1px en raison de l'arrondi natif
  • undefined dans IE8-

document.documentElement.clientWidth et .clientHeight

Ressources


1014
2018-01-16 05:23



Fonctions de dimension jQuery

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


97
2017-08-08 06:01



Vous pouvez utiliser le window.innerWidth et window.innerHeight Propriétés.

innerHeight vs outerHeight


61
2017-08-08 06:39



Si vous n'utilisez pas jQuery, ça 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 en prend soin.

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

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

30
2017-08-08 06:20



Je sais que cela a une réponse acceptable, mais je suis tombé sur une situation où clientWidth n'a pas fonctionné, comme l'iPhone (au moins le mien) est revenu 980, pas 320, donc j'ai utilisé window.screen.width. Je travaillais sur un site existant, devenant "responsive" et obligeant les plus grands navigateurs à utiliser une méta-viewport différente.

J'espère que cela aidera 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);

10
2017-08-12 19:12



J'ai été capable de trouver une réponse définitive en JavaScript: The Definitive Guide, 6ème édition par O'Reilly, p. 391:

Cette solution fonctionne même en mode Quirks, contrairement à la solution actuelle de Ryan 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 };

}

sauf pour le fait que je me demande pourquoi la ligne if (document.compatMode == "CSS1Compat") n'est pas if (d.compatMode == "CSS1Compat"), tout a l'air bien.


9
2017-08-17 01:18



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.


7
2018-02-16 21:31



J'ai regardé et trouvé un moyen de 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>


7
2018-05-30 09:07