<div class="content">

   <h2>
     window.innerWidth &times; window.innerHeight:<br>
     <span id="innerWidth"></span> &times; <span id="innerHeight"></span>       
   </h2> 
  <p>— returns window dimensions including scrollbars.</p>
  
  <br><br>
  
   <h2>
     document.documentElement.clientWidth
 &times; document.documentElement.clientHeight:<br>
     <span id="clientWidth"></span> &times; <span id="clientHeight"></span>      
   </h2> 
  <p>— returns document dimensions (limited by window) without scrollbars.</p>
  
  <br><br> 
  
</div>
@-ms-viewport { width: device-width; }

body {
  background: #ddd url(https://www.oocities.org/dtmcbride/tech/web-dev/IMGS/ruler-vh.gif) top left no-repeat; 
}

.content {
  margin: 2em;
  padding: 1em 2em;
}

h2 {
  margin-bottom: 0;
}
function getViewports() {

  document.getElementById("innerWidth").innerHTML = 
    window.innerWidth;
  document.getElementById("innerHeight").innerHTML = 
    window.innerHeight;

  document.getElementById("clientWidth").innerHTML = 
    document.documentElement.clientWidth;
  document.getElementById("clientHeight").innerHTML = 
    document.documentElement.clientHeight;
  
}

window.addEventListener('resize', getViewports);
window.addEventListener('orientationchange', getViewports);

getViewports();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.