Get ScrollWidth does not work in vertical resize (Angular)

Question

I am working on chrome working on angular 8, and perform a host listener for the resize of the window in which I am interested in obtaining the width of the window to increase the size of an internal div that I want to have a horizontal scroll. The point is that when I capture the width of the window, and do a vertical resize (opening the console) the value of the window size seems to change dramatically. Below I put the code of my function and the result of the impression by console

@HostListener('window:resize', ['$event'])
  onResize(event) {
    console.log("scrollwidth: "+document.body.innerWidth);
    this.updateBoardWidth();
  }

Answer 1

This should help you out a bit.

Anyway the main difference between

window.innerWidth

and

document.body.innerWidth

is that the first line request directly to the window object to give the width using the viewPort, while the second line ask the same thing to the body, without passing by the viewPort. You can easily try it even in this page by trying to get the body height and the client height while using a normal zoom and, then, a zoom larger than the default one. Here's an example:

If you need more informations I'll edit this answer!