Difference between screen and window property?

Question

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 ?

Answer 1

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

Answer 2

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

Answer 3

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).