获取用户浏览器窗口的最大视口大小

我正在开发一个项目,包括几个可拖动的div,使用带有约束功能的jQuery-UI来帮助用户避免隐藏在郊区的迷路div.

现在我得到约束的全屏尺寸:

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

这非常接近我的愿望.但是,由于所有浏览器都有顶部的标签和搜索输入行,而且底部通常还有其他一些东西,我得到的约束比实际的视图端口要大.然后你说获取视图端口尺寸:

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

嗯,这是接近但不是100%,因为如果用户在进入网站时具有最小化窗口,则视图端口大小将是约束大小.这意味着如果用户然后使用全屏,那么约束就像视图端口从一开始就一样大.

然后你可能会说:" 为什么不沿途动态改变约束？ "

嗯,这可能是一种可能性,但整个页面的想法是微调GUI并通过改变约束大小可能会破坏可拖动对象的定位.那么,我要求的是什么？

我想要一种方法来获得当前用户屏幕上的最大浏览器视图端口大小？无论用户在进入页面时是否具有小于最大浏览器窗口的ATM.

PS.我想我可以检查用户使用的浏览器,并通过硬编码删除特定浏览器标题栏使用的像素数量.然而,由于几个原因,这在我的书中是一个糟糕的解决方案.