Bekijk hieronder de uitgebreide beeldscherm afmetingen in pixels.

De verschillen tussen de diverse waarden zitten in de padding, randen en de marges.

  • innerWidth / innerHeight - inclusief de padding maar zonder de randen
  • outerWidth / outerHeight - inclusief de padding, de randen en eventuel de marges
  • height / width - dit zijn de afmetingen zonder padding, marges of randen

{source}

  <div class="col-lg-8">
    <div class="table-responsive">
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr class="primary">
            <th>Test</th>
            <th>Resultaat</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Beeldscherm resolutie</td>
            <td><noscript><div><b>Javascript staat uit<br />geen resolutie detectie</b></div></noscript><script type="text/javascript">document.write('<b>' + screen.width + ' X ' + screen.height + ' pixels<\/b>');</script></td>
          </tr>
          <tr>
            <td>innerWidth</td>
            <td><script type="text/javascript">
//<![CDATA[

        if (window.innerWidth)
            document.writeln(window.innerWidth);
        else if (document.body)
            if (document.body.offsetWidth)
                document.writeln(document.body.offsetWidth);
            else
                document.writeln("Eigenschap is niet ondersteund in deze browser");
    //]]>
</script> pixels</td>
          </tr>
          <tr>
            <td>innerHeight</td>
            <td><script type="text/javascript">
//<![CDATA[

        if (window.innerHeight)
            document.writeln(window.innerHeight);
        else if (document.body)
            if (document.body.offsetHeight)
                document.writeln(document.body.offsetHeight);
            else
                document.writeln("Eigenschap is niet ondersteund in deze browser");
    //]]>
</script> pixels</td>
          </tr>
          <tr>
            <td>outerWidth (incl menu/scrollbalk)</td>
            <td><script type="text/javascript">
//<![CDATA[

        if (window.outerWidth)
            document.writeln(window.outerWidth);
    //]]>
</script>pixels</td>
          </tr>
          <tr>
            <td>outerHeight (incl menu/scrollbalk)</td>
            <td><script type="text/javascript">
//<![CDATA[

        if (window.outerHeight)
            document.writeln(window.outerHeight);
    //]]>
</script>pixels</td>
          </tr>
        </tbody>
      </table>
    </div>
</div>

 {/source}