So the definition of innerWidth
according to W3C is:
The innerWidth attribute must return the viewport width including the size of a rendered scroll bar (if any), or zero if there is no viewport.
Does this mean that if something inside the document generates overflow then window.innerWidth
can be affected? I have this very simple sandbox (which is only a div causing overflow) and this seems to be true when using the sandbox preview with Chrome device tools (Chromium 84) and in mobile (I only tested Android), but in desktop browsers the value doesn't seem to be affected. Why? Is this the intended behavior?.
Note in the image that the width in the tools don't match the logged width:
No, overflowed content cannot affect window.innerWidth
. What you are seeing is an issue with chrome dev tools. The window is still 1600px even though chrome is artificially resizing to a mobile device size.