Obtenez la fenêtre d'affichage du navigateur dimensions avec JavaScript

Que je veux offrir à mes visiteurs la possibilité de voir des images de 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 l'espace vert ici:

Obtenez la fenêtre d'affichage du navigateur dimensions avec JavaScript

  • Ce que je fais est un élément habituellement html à 100% de la hauteur et d'obtenir sa hauteur. Simple fonctionne partout.
  • bonne prise! Si vous êtes frustrés obtenir les dimensions (et vous, sur les téléphones mobiles sans jQuery), vous pouvez getComputedStyle de l'étendue de la html tag.
  • Aussi, vous pouvez utiliser le W de la bibliothèque, qui s'occupe de la croix-navigateur de la fenêtre de détection 😉
InformationsquelleAutor Alix Axel | 2009-08-08
  1. 1165

    Cross-browser @media (largeur) et @media (hauteur) 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 fenêtre d'affichage @media (width) et @media (height) qui comprennent les barres de défilement
    • initial-scale et zoom les variations de peut provoquer mobile des valeurs de tort mise à l'échelle vers le bas pour ce PPK appelle la visual fenêtre d'affichage et être plus petite que la @media valeurs
    • zoom peut causer des valeurs de 1px en raison natif de l'arrondissement
    • undefined dans IE8-

    document.documentElement.clientWidth et .clientHeight

    Ressources

    • Je me demandais si le quirksmode lien dit clientWidth / clientHeight est un no-go dans IE9 sur mobile. Pouvez-vous préciser sur qui? Excellente réponse par la manière dont! Merci!
    • Je ne suis pas sûr de IE9. Vous pouvez tester en comparant les valeurs de responsejs.com/labs/dimensions - C'est juste, si elle correspond à la @media point d'arrêt. Voir mise à jour de la réponse ci-dessus aussi.
    • Quelle est la bonne façon de l'utiliser verge.js? J'ai essayé ceci: http://pastebin.com/Qb6ucjGE, mais il ne fonctionne pas. Si possible, veuillez jeter un oeil.
    • Remplacer $ avec verge. Si vous voulez intégrer dans jQuery, ne jQuery.extend(verge). Voir: verge.airve.com/#static
    • Oh, j'ai manqué de noter, dans la doc. Ne savais pas à l'aide de deux doigts serait facile! Merci beaucoup!
    • Je voulais juste dire que dans IE8 (et peut-être d'autres) vous devez avoir le <!DOCTYPE html> en haut de la page pour que le code fonctionne.
    • Bon point. Tout code HTML valide ou doctype XHTML semble suffire.
    • Je ne suis pas heureux avec clientWidth/Hauteur sur des appareils mobiles, vraiment tripleodeon.com/wp-content/uploads/2011/12/table.html
    • Cela ne semble pas fonctionner. 🙁
    • Comment alors?
    • Tant pis, fausse alerte. J'ai été regarder sur mobile et de l'ofc les largeurs sont les mêmes en raison de la superposition des barres de défilement. Savez-vous d'une méthode alternative pour window.innerWidth? Je suis en train de calculer la largeur de la barre de défilement à résoudre les simplifier stackoverflow.com/q/23504154/89771.
    • Pourriez-vous expliquer cela?
    • Je pense que la réponse ci-dessus ne fonctionne pas sur mobile. Je pense que la plupart des développeurs souhaitez obtenir des pixels virtuels sur la Rétine, et non pas physique.
    • howtocreate.co.royaume-uni/tutoriels/javascript/browserwindow
    • Ne semble pas fonctionner sur Firefox mobile, j'ai toujours 980x480 px2, quel que soit le zoom ou l'orientation.
    • -1 C'est trop difficile de comprendre ce que vous essayez de dire après que la dernière édition.
    • malheureusement, dans de Mobile de Chrome sur les appareils Android document.documentElement.clientHeight et window.innerHeight ont la même valeur, ce qui est encore différent de window.screen.height window.screen.availHeight quand adressbar est caché en raison de commandes numériques (testé sur nexus 5 avec android lollipop )
    • Sauf si je suis en manque de quelque chose, cette réponse est fausse. Dans Chrome, au moins, document.documentElement.clientHeight retourne le la hauteur de la page, alors que les window.innerHeight retourne le fenêtre d'affichage de la hauteur de. Grande différence.
    • En plus de l'iOS bug sur les versions plus anciennes cités par Dan, il y a aussi une étrangeté sur le mobile actuel Safari qui window.innerWidth peut en fait être plus grand que le réel virtuel (pixels) et de la largeur de l'écran, si il y est déjà contenu dans les DOM qui est plus grand. Dans ces situations, document.documentElement.clientHeight renvoie toujours la plus petite corriger la largeur de la fenêtre d'affichage. Ce qui bien sûr est bizarre et tout à fait contraire à ce que l'on pourrait attendre.
    • Dans Firefox, documentElement.clientHeight et documentElement.clientWidth, lorsqu'il est appelé à partir à l'intérieur de SVG document renvoie toujours 0 pour les deux. Dans google Chrome, ils retournent les valeurs correctes.
    • que voulez-vous dire de l'intérieur un document SVG?
    • Les navigateurs peuvent lire/analyser/affichage des documents SVG et Javascript peut être utilisé à l'intérieur d'eux.
    • en confirmant, dans une version mobile de Chrome ce code renvoie mauvaise hauteur.
    • La page que vous avez testé sur les ont un DOCTYPE? DOCTYPE est nécessaire pour document.documentElement.clientHeight pour être précis. Sinon, pouvez-vous nous donner quelques chiffres? Je viens de vérifier dans le Chrome du bureau de Windows et Chrome iPhone et l' .max technique encore travaillé. Comparer à actual("height", "px") à partir de github.com/ryanve/actual#api
    • Sur une note de côté, juste dois dire que cette réponse pourrait être grammaticalement plus propre.
    • rien de vous empêche de le modifier...
    • Ne serait-il pas plus logique de faire Min(clientHeight, innerHeight) || 0?
    • Aucune raison à l'appui, car Math.min(777, undefined) est NaN
    • eh bien, vous pouvez probablement ajouter un peu de vérifier que. Mon point est que je pense que la bonne chose est d'essayer d'obtenir le nombre minimum de 0. Que devrait éviter d'avoir les barres de défilement calculée, dans les différents navigateurs. c'est à dire Min(Min(clientHeight || Infinity, innerHeight || Infinity) || 0)
    • d'écran différent de taille variables/solutions de test en direct: ryanve.com/lab/dimensions

    InformationsquelleAutor ryanve
  2. 106

    jQuery dimension fonctions

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

    • non jQuery solution serait bon
    • impossible, jQuery est la réponse à tous.
    • Ce n'est pas obtient taille de la fenêtre, mais dans l'ensemble de la taille du document. Essayez-la.
    • Pour les navigateurs qui affichent leur addon les barres d'outils comme le HTML avec fixe postitionning, cette solution n'est pas de travail, surtout si vous souhaitez utiliser dans votre code top positionnement et de pourcentages.
    • Nope, je l'ai juste testé sur ce page. $(window).height(); retourne 536, alors que $("html").height(); retourne 10599
    • Avertissement ces dimensions ne comprennent pas les barres de défilement (qui ont des tailles différentes dans les différents navigateurs et plates-formes) et, par conséquent, elles ne correspondent pas avec les css media queries d'autres réponses ici ne sont toutefois résoudre ce problème.

    InformationsquelleAutor Scott Evernden
  3. 69

    Vous pouvez utiliser le de la fenêtre.innerWidth et de la fenêtre.innerHeight propriétés.

    Obtenez la fenêtre d'affichage du navigateur dimensions avec JavaScript

    • Ne fonctionne pas sous IE quirksmode.org/dom/w3c_cssom.html#windowview
    • Même si cela ne fonctionne pas dans IE +1 pour le schéma :D. Pour une question comme ça, il devrait être un crime de ne pas avoir plus de ces.
    • est plus précis et plus largement soutenue que window.innerWidth
    • Si par "plus précis" tu veux dire "ne fait pas, même de loin, faire la même chose", alors oui 😛
    • Voir la 2013 mise à jour de stackoverflow.com/a/8876069/770127
    • Firefox Beta? C'est quelque chose appartenait à le musée.
    • Dans le navigateur Safari mobile, document.documentElement.clientWidth me donne la largeur de la fenêtre d'affichage tout en fenêtre.innerWidth me donne la largeur. Oui, que le chemin de ronde.
    • +1 pour une solution simple, au point de réponse. Trop de ppl écrire une thèse sur le pourquoi, lorsque 80%+ de nous voulez juste commencer à travailler et de progresser avec nos vies! 🙂

    InformationsquelleAutor CMS
  4. 31

    Si vous n'êtes pas à l'aide de jQuery, il devient laid. Voici un extrait de code qui devrait fonctionner sur tous les nouveaux navigateurs. Le comportement est différent en mode Quirks et les normes de la mode dans IE. Cela prend soin d'elle.

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

var height = elem.clientHeight;
var width = elem.clientWidth;
    • N'est-ce pas vous donner la hauteur de la page, pas la fenêtre? C'est ce que cette page semble l'indiquer: developer.mozilla.org/en/DOM/element.clientHeight
    • Vous utilisez clientHeight sur le document.documentElement élément, qui vous donnera la taille de la fenêtre. Pour obtenir la taille du document, vous aurez besoin de faire document.body.clientHeight. Comme Chetan explique, ce comportement s'applique pour les navigateurs modernes. Il est facile de tester. Il suffit d'ouvrir une console et taper document.documentElement.clientHeight sur plusieurs onglets ouverts.
    InformationsquelleAutor Chetan Sastry
  5. 11

    J'ai été capable 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, tandis que ryanve et ScottEvernden de la solution actuelle 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 };

}

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

    • tu parles d'un écran Retina ou Paysage vs Portrait ou la balise meta "viewport"? Vous ne voulez pas dire pixels virtuels comme dans snowdragonledhk.com/... ?
    • 1) Quand on parle de haute résolution affiche je veux dire pixels virtuels expliqué ici: stackoverflow.com/a/14325619/139361. Chaque écran de l'iPhone est exactement 320 virtuel pixels de large. 2) je dis que: a)documentElement.clientWidth ne pas répondre sur le dispositif de changement d'orientation sur iOS. b) affiche physique nombres de pixels (pratiquement inutile) au lieu de pixels virtuels
    InformationsquelleAutor 太極者無極而生
  6. 11

    Je sais que c'est une réponse acceptable, mais j'ai couru dans une situation où clientWidth n'ai pas de travail, que l'iPhone (au moins la mienne) retourné 980, pas 320, j'ai donc utilisé window.screen.width. Je travaillais sur le site existant, en faisant "répondre" et nécessaire pour forcer les grands navigateurs à utiliser une autre méta-fenêtre d'affichage.

    Espère que cela aide quelqu'un, il ne peut pas être parfait, mais il 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);
    InformationsquelleAutor Jazzy
  7. 10

    J'ai cherché et trouvé un navigateur croix de chemin:

    JS:

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

    HTML:

    <!DOCTYPE html>
<html>
  <body onresize="myFunction()" onload="myFunction()">
   <p>
    Try to resize the page.
   </p>
   <p id="demo">
    &nbsp;
   </p>
  </body>
</html>

    • testé, cela fonctionne!
    • notez que stackoverflow de l'utilisation d'une iframe entourant l'extrait de code bousille le résultat
    InformationsquelleAutor user2921779
  8. 9

    Ce code est à partir 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, l'utilisation console.log('viewport width'+viewport().width);

    InformationsquelleAutor Xavier Blondel
  9. 9

    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 horizontale.

    • Avez-vous testé votre réponse à travers des Systèmes d'exploitation, sur les écrans de la Rétine et du paysage/portrait modes? Ce lien couvre plutôt systèmes obsolètes, mais il s'avère que votre code ne fonctionne pas: tripleodeon.com/wp-content/uploads/2011/12/table.html
    • Non, je n'ai pas de test.
    InformationsquelleAutor Szépe Viktor
  10. 8

    Si vous êtes à la recherche pour les non-jQuery solution qui donne les bonnes valeurs en pixels virtuels sur mobile, et vous pensez que la plaine window.innerHeight ou document.documentElement.clientHeight peut résoudre votre problème, veuillez consulter ce lien: 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, normal/haute densité affiche.

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

    Je cherchais la largeur de la page en pixels virtuels sur mobile, et j'ai trouvé le seul code du travail est (de manière inattendue!) window.outerWidth. Je vais examiner plus tard ce tableau pour corriger la solution de donner de la hauteur à l'exclusion de la barre de navigation, quand j'ai le temps.

    • J'obtiens une erreur 404 pour ce lien.
    • lien mis à jour pour corriger url
    InformationsquelleAutor Dan
  11. 6

    Une solution qui serait conforme aux normes W3C serait de créer un transparent div (par exemple de façon dynamique avec JavaScript), définissez la largeur et la hauteur de 100vw/100vh (Fenêtre d'affichage unités) et ensuite obtenir son offsetWidth et offsetHeight. Après cela, l'élément peut être retiré à nouveau. Cela ne fonctionnera pas dans les navigateurs plus anciens, parce que la fenêtre d'affichage unités sont relativement nouveaux, mais si vous ne se soucient pas d'eux, mais à propos de (bientôt) des normes au lieu de cela, 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" et ensuite utiliser 100% de la largeur/hauteur - ce qui devrait avoir le même effet et d'améliorer la compatibilité, dans une certaine mesure. Aussi, la position de réglage fixe pourrait être une bonne idée en général, parce que sinon la div sera invisible, mais qui consomment de l'espace, qui va conduire à des barres de défilement apparaissant etc.

    • Malheureusement, la réalité complètement détruit votre "W3C - normes de solution": 1) caniuse.com/viewport-units 2) caniuse.com/#feat=css-fixed. Ce que les développeurs ont besoin est la solution qui fonctionne, et non pas "doit, en principe, de travail".
    • Si nous pouvons nous appuyer sur les normes alors que nous n'avons pas besoin de toutes ces croix navigateur solutions. Une solution qui répond à la spécification n'est pas une solution.
    • Cela ne veut pas afficher la fenêtre d'affichage, mais le document w/h
    InformationsquelleAutor Firefall
  12. 3

    C'est la façon dont je le fais, je l'ai essayé sous IE 8 -> 10, FF 35, Chrome 40, il fonctionne très lisse dans tous les navigateurs modernes (comme la fenêtre.innerWidth est défini) et dans IE 8 (sans fenêtre.innerWidth), il fonctionne en douceur ainsi, tout problème (comme clignote en raison de dépassement: "caché"), merci de nous le signaler. Je ne suis pas vraiment intéressé sur la fenêtre d'affichage de la hauteur que j'ai fait cette fonction juste pour contourner certains outils adaptés aux besoins, mais il pourrait être mis en œuvre. Espérons que cela aide, j'apprécie les commentaires et les 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)
  );
}
    InformationsquelleAutor manolinjr81