Get the max-viewport size of user browser window

Question

I am working on a project including several draggable divs using jQuery-UI with the constrain functionality to help the user avoid stray divs hiding in the outskirts.

Now I am getting the full screen dimensions for the constrains:

var width = window.screen.availWidth;
var height = window.screen.availHeight;

And that is pretty close to what I desire. However, as all browser have the tabs and search input line on the top and often some other stuff at the bottom I am getting a bigger constrain than the actual view port. Then you say get the view port dimensions:

$(window).height();
$(window).width();

Well, that is close to but it is not 100%, because if the user has a minimized window when entering the site that view port size is going to be the constrain size. This means that if the user then uses full screen the constraint is just as big as the view port were from the start.

Then you might say: " Why not change the constrain dynamically along the way? "

Well, that could have been a possibility but this whole page idea is to fine tune the GUI and by changing the constrain size could potentially mess upp the positioning of the draggable objects. So, what am I asking for?

I am asking for a way to get the maximum browser view port size on the current users screen? No matter if the user has a smaller than max browser window ATM when entering the page.

PS. I suppose I could check which browser the user is using and by hard code remove the amount of pixels that specific browsers head-bar is using. That however is a bad solution in my book, for several reasons.

Answer 1

with some good suggestions pointing me in the right direction I have now understood my problem.. I think.

These two bad boys are actually doing the trick:

var width = window.screen.availWidth;
var height = window.screen.availHeight;

BUT!! I am on a desktop running windows and the taskbar at the bottom is actually overlaying the chrome browser window! This was what made me confused to start with. So... yeah. I guess that is it. I just have to live with my users beeing able to put the divs under the win taskbar. Well ok! Bye

Answer 2

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

Answer 3

Although pretty hacky, you could take advantage of the viewport units of css.

$('body').css({
    'height': '100vh',
    'width': '100vw'
});

var height = $('body').height(); // or innerHeight or OuterHeight 
var width = $('body').width();

vw : Relative to 1% of the width of the viewport

vh : Relative to 1% of the height of the viewport

vmin : Relative to 1% of viewport's smaller dimension

vmax : Relative to 1% of viewport's larger dimension

https://www.w3schools.com/cssref/css_units.asp

Answer 4

You can use $(window).outerWidth() and $(window).outerHeight() You may refer these links. https://developer.mozilla.org/en-US/docs/Web/API/Window/outerHeight https://developer.mozilla.org/en-US/docs/Web/API/Window/outerWidth