howto find the correct size of the visual vieport in the browser, instead of window.innerHeight and similar

Question

Often, window.innerWidth and window.innerHeight give unsatisfying values, as in this example.

In the same example, I use a workaround to adapt exactly a div to the browser visual layout (the class hackedWindowSizes, based on element.getBoundingClientRect ), but I don't like it vary much.

Is there a standard instrument to make the same thing?