window.innerWidth– viewport width, including scrollbar width, CSS media query uses this
document.documentElement.clientWidth– also viewport width
element.clientWidth– element width, can use this to get width without scrollbar by
Which metric to use to get viewport size
The major differences between the above four widths are mainly about whether they're associated width the window or an element. And more practically, whether they include scrollbar width. The first two include scrollbar width, the last two don't.
document.documentElement.clientWidth, from _A Tale of Two Viewports**:
If you know your DOM, you know that
document.documentElementis in fact the element: the root element of any HTML document. However, the viewport is one level higher, so to speak; it’s the element that contains the
<html>element. That might matter if you give the
<html>element a width. (I don’t recommend that, by the way, but it’s possible.)
In that situation
-Heightstill gives the dimensions of the viewport, and not of the
<html>element. (This is a special rule that goes only for this element only for this property pair. In all other cases the actual width of the element is used.)
For consistency, we should use metric that is used by CSS media queries.
Recent testing with media queries shows that
window.innerWidth is used for CSS media queries, which coincides with
document.documentElement.clientWidth as well.
In Chrome, when you open dev tools, it displays a viewport size (with my current version
Version 86.0.4240.198 (Official Build) (x86_64) this shows up on the top right corner). This viewport size assumes that you're using 100% zoom ratio. If you zoom in or zoom out, the actual viewport resizes, but this resported dimensions won't change.
This is the most helpful article thus far:
- A tale of two viewports — part one