[ACCEPTED]-screen.width and screen.availwidth difference in javascript-screen-resolution

Accepted answer
Score: 20

Some things block some of your viewport, such 13 a history/bookmarks side panel. This includes 12 the taskbar, unless it's on Autohide

Then 11 window.screen.width != window.screen.availWidth. :)

If you are drawing things to the viewport, you 10 ought to use availWidth / availHeight to determine if things 9 are off the viewport etc. Be sure to recalculate 8 on window resize otherwise you won't know 7 when the sidepanel has been closed.

Note 6 that not all of the width given by this 5 property may be available to the window 4 itself. When other widgets occupy space 3 that cannot be used by the window object, there 2 is a difference in window.screen.width and 1 window.screen.availWidth.

Source.

Score: 8
  • window.screen.width -> Returns the width of the screen.

  • window.screen.availWidth -> Returns 3 the amount of horizontal space in pixels 2 available to the window.

It is best to use screen.availWidth for the 1 exact size available for our component example.

Score: 1

An example might help understand the difference 11 between:
screen.width and screen.availWidth
screen.height 10 and screen.availHeight

In Windows XP/7/ecc. there 9 is a thing called taskbar.
The taskbar is 8 where the start button/clock etc. are.
The 7 taskbar is usually at the bottom of the 6 screen.

Case 1
Our browser is maximized, we 5 can see the Windows taskbar under the browser.
window.outerHeight == screen.availHeight == all the height minus the taskbar

Case 4 2
Our browser is fullscreen (usually clicking 3 F11), we can't see the Windows taskbar.
window.outerHeight == screen.height == all the height

For 2 screen.width and screen.availWidth the reasoning 1 is the same.

More Related questions