I am a bit confused about the concept of viewport in JavaScript and in the DOM, especially document.documentElement.clientWidth that should return the width of the viewport.
In fact, document.documentElement is the html element, and regardless if I already set a fixed width in px of the html element, clientWidth will return the viewport dimension.
Now, when I studied CSS I learned that the mobile browser has two viewports, the default viewport and the ideal viewport. The default viewport is useful for a browser without responsive techniques. The ideal viewport is the viewport used when I have provided RWD mechanism (In this case I have to use <meta name="viewport" content="width=device-width, initial-scale=1.0"> and media query ).
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 visual viewport and layout viewport that comes into play when there is zoom, for instance.
Now I would like to know from document.documentElement.clientWidth which viewport dimension returns both on desktop computer and mobile phone (if there are differences). Because I tried, and I find that window.innerWidth/Height (the browser content area) is almost always the same value of document.documentElement.clientWidth/Height(except for scroll, margin, and border pixel values).
How is it possible? Is there a different meaning of "viewport" in JavaScript DOM that I'm missing?
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Experiment</title>
<style>
p{
float:right;
width:20%;
}
</style>
</head>
<body>
<p id="par">Hello</p>
<script>
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);
</script>
</body>
</html>
results in (I'm in remote debug from my pc to my Samsung Galaxy A5, with a local server that serve my web page ):
560//browser window viewport (innerHeight)
360
560//viewport (document.documentElement.clientHeight)
360
640 //screen size
360
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:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and i get:
1524 //browser window viewport (innerHeight)
980
1524 //viewport (document.documentElement.clientHeight)
980
640 //screen size
360
How I expected the viewport size is changed without the meta tag, because the page is mapped on the default viewport (1540x980) and later will be shrunk in the physical pixel (640x360 less or more).
Ok, but I don't understand why the browser window viewport (innerHeight\innerWidth) still has the same dimensions of viewport (clientWidth|clientHeight). I would have expected that browser windows viewport to remain 560x640.
Can someone give me an explication about this?
I tested this on Google Chroome.
The CSSOM View spec defines both window.innerHeight/Width and document.documentElement.clientHeight/Width in terms of the same viewport, just differing in whether the scrollbars are included or not, so they should always change together.
Which notional viewport gets used is not defined there though. Because it is formally defined by a standard, I think we can take it that it uses the actual viewport as described in the CSS Device Adaptation spec.