Quelle est la différence entre window.innerWidth window.outerWidth?

J'ai examiné les window objet dans Firebug. window.innerWidth et window.outerWidth sont à la fois 1230.

Quelle est la différence entre ces deux valeurs?

source d'informationauteur John Hoffman

  1. 10

    De Mozilla Developer Network:

    fenêtre.outerWidth

    fenêtre.outerWidth obtient la largeur de l'extérieur de la fenêtre du navigateur.
    Il représente la largeur de la fenêtre du navigateur, y compris la barre latérale
    (si étendu), la fenêtre de chrome et de redimensionnement de la fenêtre frontières/poignées.

    et

    fenêtre.innerWidth

    Largeur (en pixels) de la fenêtre du navigateur fenêtre d'affichage, y compris, si
    rendus, la barre de défilement verticale.

    C'est apparemment la façon dont ils travaillent. Une page de test, cependant, montre qu'ils sont tous les deux le même, peu importe comment je les redimensionner dans Firefox 14.0.1 sur Ubuntu 12.04. Dans Chrome, ils renvoient les numéros de 8 pixels différents. Faire un peu de dead reckoning, il apparaît la fenêtre de chrome sur cette application particulière est d'environ 4 pixels sur le côté gauche et 4 pixels sur le côté droit et que cette différence est correctement choisi dans le navigateur.

    Code de la page de test, j'ai utilisé:

    <!DOCTYPE html>
<html lang="en">
<head>
    <title>12066093</title>
    <meta charset="utf-8">
</head>
<body>
<div style="width:2000px; height: 2000px;">hi</div>
<script type="text/javascript">
    alert("window.innerWidth: " + window.innerWidth + "\nwindow.outerWidth: " + window.outerWidth);
</script>
</body>
</html>
  2. 2

    Vérifier le Mozilla de référence pour de la fenêtre.innerWidth et de la fenêtre.outerWidth. Si votre système d'exploitation/gestionnaire de fenêtre, fenêtre.outerWidth comprend les bordures de la fenêtre, les poignées de redimensionnement, et des barres de navigation.

    Essayer d'ouvrir les signets ou l'histoire de la barre latérale, puis essayer de nouveau dans Firebug.