title: Understand which viewport is returned from document.documentElement.clientWidth/Height, and difference with window.innerHeight/innerWidth
body: <p>I am a bit confused about the concept of <em>viewport</em> in JavaScript and in the DOM, especially <code>document.documentElement.clientWidth</code> that should return the width of the viewport.</p>
  
  <p>In fact, <code>document.documentElement</code> is the <code>html</code> element, and regardless  if I already set a fixed width in px of the <code>html</code> element, <code>clientWidth</code> will return the viewport dimension. </p>
  
  <p>Now, when I studied CSS I learned that the mobile browser has two viewports, the default viewport and the ideal viewport. The <em>default</em> viewport is useful for a browser without responsive techniques. The <em>ideal</em> viewport is the viewport used when I have provided RWD mechanism (In this case I have to use <code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</code> and media query ). </p>
  
  <p>For example, the iPhone 5 has a physical screen width of 640 px, but its ideal viewport is 320 px.  Furthermore, there is the concept of <em>visual viewport</em> and <em>layout viewport</em> that comes into play when there is zoom, for instance.</p>
  
  <p>Now I would like to know from <code>document.documentElement.clientWidth</code> which viewport dimension returns both on desktop computer and mobile phone (if there are differences). Because I tried, and I find that <code>window.innerWidth/Height</code> (the browser content area) is almost always the same value of <code>document.documentElement.clientWidth/Height</code>(except for scroll, margin, and border pixel values).</p>
  
  <p>How is it possible?   Is there a different meaning of "viewport" in JavaScript DOM that I'm missing?</p>
  
  <p>For example: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
     &lt;meta charset="UTF-8"&gt;
     &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
     &lt;title&gt;Experiment&lt;/title&gt;
     &lt;style&gt;
  
        p{
           float:right;
           width:20%;
        }
     &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
    &lt;p id="par"&gt;Hello&lt;/p&gt;
  
     &lt;script&gt;
  
        console.log(window.innerHeight);
        console.log(window.innerWidth);
        console.log(document.documentElement.clientHeight);
        console.log(document.documentElement.clientWidth);
        console.log(screen.height);
        console.log(screen.width);
  
     &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>results in (I'm in remote debug from my pc to my Samsung Galaxy A5, with a local server that serve my web page ):</p>
  
  <pre><code>560//browser window viewport (innerHeight)
  360
  560//viewport (document.documentElement.clientHeight)
  360
  640 //screen size
  360
  </code></pre>
  
  <p>The viewport and the browser viewport are the same. I can accept it so far. Now the same page but I  get out of the way this metatag:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  </code></pre>
  
  <p>and i get:</p>
  
  <pre><code>1524 //browser window viewport (innerHeight)
  980
  1524 //viewport (document.documentElement.clientHeight)
  980  
  640 //screen size
  360 
  </code></pre>
  
  <p>How I expected the viewport size is changed without the meta tag, because the page is mapped on the <strong>default viewport</strong> (1540x980) and later will be shrunk in the physical pixel (640x360 less or more).</p>
  
  <p>Ok, but I don't understand why the browser window viewport (<code>innerHeight\innerWidth</code>) still has the same dimensions of viewport (<code>clientWidth|clientHeight</code>). I would have expected that browser windows viewport to remain 560x640.</p>
  
  <p>Can someone give me an explication about this? </p>
  
  <p>I tested this on Google Chroome.</p>