Develop Reference

Can overflowed content affect window.innerWidth?

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.

window.innerWidth returning same value on different displays

I have a small display monitor connected through a VGA connector to my laptop, running Windows. The display is identical in both of them. I am now running a small piece of JavaScript to determine the width of the smaller screen from the laptop -
alert(window.innerWidth);
The same width of 441 is being shown for both screens. Is there a way to write the code/change the configuration in such a way so that the width of each display is shown in the alert box?

The window.innerWidth returns the current window width (as expected). It changes dynamically when you're resizing the window. If the value persists, it means that the width hasn't changed, or the resolutions are the same. Given the small value (441), I presume that the window isn't maximized, so when you are moving it to the other screen, the value is actually the same.
See the documentation for more info: innerWidth

The alert only shows the innerWidth of the first choosen device width. To show the width all the time, you have to add the event listener resize to the window:
function showInnerWidth() {
console.log(window.innerWidth);
}
window.addEventListener("resize", showInnerWidth);
Do not use alert, because then it will alert all the time you resize the window.

How to get the maximum available screen height in java script?

document/window outerHeight provides the size of the window (e.g when the browser windows is re-sized the value changes ).
screen.availHeight gives you the actual screen size (including the actual browser navigation etc)
I tried creating a fixed div set with top:0,buttom:0 and get the outerHeight but it's also restricted to the window's current size.
What is the best way to get the max available height when the window is maximized ?
Thanks.
EDIT
The answer, provided with the help of #Greg Burghardt is
screen.availHeight - (window.outerHeight - window.innerHeight)

You may be looking for:
document.documentElement.offset[Height|Width]
A good reference: A Tale of Two Viewports

Get window size including frame with javascript

In javascript, window.open() with width=500 height=500 open a new window with page size(the area in which the html is displayed) of 500 by 500. But the size of the whole window is larger (width and height in the picture, depends on theme,operating system etc...)
Our system needs to use window.open() in different environments (OS's, themes...). In each environment the window needs to open in max size so it covers the whole screen and only the taskbar is not covered.
In order to do so, I need to be able to find the size of the extra controls(all the aero glass and buttons ). If I had the width and height of whole window, I could substract from it the page size. Is there a way to get those values (height and width of the whole window) ?

if I understand good, you can find the extra space with:
window.outerHeight - window.innerHeight

You could use screen.height;andscreen.width; to get the full scrren resolutions or screen.availHeight to get the height of the visitor's screen, in pixels, minus interface features like the Windows Taskbar.
For information about window.height and sreen.height see the post from jigfox.

Difference between screen and window property?

In my Web application , am in need to use the browser window's Height & Width. So I used Screen.Width , Screen.Height properties in JavaScript to get the Width & Height. While am surfing I got another property as Window.Width , Window.Height. Can anyone tell me , which property gives me the Size of Browser window.....Screen (or) Window ?

screen is actually window.screen since window is the context for globals.
A window object (obtained through document.defaultView) returns information about both the window and the viewport. To get the application window size use window.outerHeight, to get viewport size use window.innerHeight.
The screen object refers to the actual monitor window or desktop size. Note that if you have a multi-mon setup then you will have multiple screen objects. A window object belongs to a single screen, though not very window belongs to the same screen. I do not know what happens when a browser window spans multiple screens.
From all this, you can determine that if you are running a full-screen browser then window.outerHeight == window.innerHeight == screen.height.
Source: https://developer.mozilla.org/en-US/docs/DOM/window.screen and https://developer.mozilla.org/en-US/docs/DOM/window

window.screen.height
window.screen.width
height/width of the screen or monitor in pixels
window.screen.availHeight
window.screen.availWidth
height/width of the screen or monitor, in pixels, minus permanent or semi-permanent user interface features displayed by the operating system, such as the Taskbar on Windows or device status bar on smart phones
window.innerHeight
window.innerWidth
height/width of the content area of the browser window including, if rendered, the horizontal/vertical scrollbar
window.outerHeight
window.outerWidth
height/width of the outside of the browser window

What is the difference between window, screen, and document in Javascript? is pretty much this same question. To paraphrase the accepted answer and add some info that I feel it could use:
window in the root object. Any variables or functions you define are in some way children of the window object. So if you do var something="blah" in a script tag, you can later access that variable in 3 ways - something, window.something or window["something"].
screen is one of the children of window that is created by the browser. however, for the same reason that you can access window.something as something, you can access it either as window.screen or screen. This contains the properties of the actual screen, and it is where I would go to get the details you want (unless you have access to a framework like jQuery or Prototype, in which case they can probably give you this information without worries about browser compatibility).