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 ?

Check this link http://stackoverflow.com/questions/9895202/what-is-the-difference-between-window-screen-and-document-in-javascript?rq=1 — Issa Qandil, Apr 23 '13 at 06:43
Issa Qandil- Thank's for the Link. But my question is What does WINDOW refers to ? What does Screen refers to ? either my Monitor size (or) Browser window size ? — Elango_Thanumalayan, Apr 23 '13 at 06:47

score 14 · Accepted Answer · edited Sep 24 '21 at 17:46

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

When a browser window spans multiple screens the window.screen object depends on where the most of is placed. For example if you have more than half of your browser on Monitor A and the rest on Monitor B then window.screen will be of Monitor A. — Jakub, Jul 03 '23 at 19:11

score 13 · Answer 2 · edited Jun 01 '21 at 10:07

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

score 1 · Answer 3 · edited May 23 '17 at 12:10

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

Difference between screen and window property?

3 Answers3