title: How to get the actual width and height of the root node in html?
body: <pre><code>&lt;html&gt;
      &lt;head&gt; 
          &lt;meta charset=&quot;utf-8&quot; /&gt; 
          &lt;title&gt;test&lt;/title&gt; 
      &lt;/head&gt; 
      &lt;body style=&quot;background-color: red;width: 100vw;height: 100vh&quot; id=&quot;123&quot;&gt;  
          &lt;script&gt;
              window.onresize = function() {
                  var res = document.getElementsByTagName('html')[0].getBoundingClientRect();
                  document.getElementById(&quot;123&quot;).innerHTML=JSON.stringify(res)
              }
          &lt;/script&gt; 
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/NuzgX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NuzgX.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/R9hce.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R9hce.png" alt="enter image description here" /></a></p>
  <p>As in the above code, the width and height values corresponding to the window zoom will also change. The actual width and height cannot be obtained when there is a scroll bar. What I want to obtain is the current visible area plus the area hidden by the scroll bar, no matter how the window changes, the width and height Should be immobile</p>