Solution 1 :

MDN states that

The Element.clientWidth property is zero for inline elements and elements with no CSS; otherwise, it’s the inner width of an element in pixels. It includes padding but excludes borders, margins, and vertical scrollbars (if present).

and I see a scrollbar on your screenshot. Maybe that is the reason?

Solution 2 :

Curveball pointed me to the right direction. I am indeed using a custom scrollbar with a width of 10px which is substracted when calling document.documentElement.clientWidth.

/* Scrollbar */
  ::-webkit-scrollbar {
    width: 10px;
  }

I solved it by using:

window.innerWidth;    // output: 768

Problem :

I try to read the current window width. It is currently set to 768 in chrome developer tools.

enter image description here

But if I call document.documentElement.clientWidth in the console, then I get 758.


Answer to Suggested Answer: No, jquery does not solve it either. If I call $(window).width(); then I also get 758. And if I call $(document).width(); I get 992

Comments

Comment posted by clientHeight/clientWidth returning different values on different browsers

Does this answer your question?

Comment posted by Black

No, jquery does not solve it either. If I call

Comment posted by Black

You are right! I have a scrollbar which is exactly 10px wide, this is indeed the reason. Thank you.

By