Question

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

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

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

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

zip.append(new Buffer(files[i].data.buffer), { name: files[i].name } );

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

然后您可能会说：＆＃34; 为什么不沿途动态更改约束？＆＃34;

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

我想问一种在当前用户界面上获取最大浏览器视图端口大小的方法吗？无论用户在进入页面时是否具有小于最大浏览器窗口的ATM。

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

Answer 1

有一些好的建议指出我正确的方向我现在理解我的问题..我想。

这两个坏男孩实际上正在做这个伎俩：

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

BUT !!我在运行Windows的桌面上，底部的任务栏实际上覆盖了Chrome浏览器窗口！这让我开始感到困惑。是的。我想就是这样。我只需要和我的用户一起生活，他们可以把div放在win任务栏下面。好吧！再见

Answer 2

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

Answer 3

虽然非常hacky，但你可以利用css的视口单元。

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

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

vw：相对于视口宽度的1％

vh：相对于视口高度的1％

vmin：相对于视口较小尺寸的1％

vmax：相对于视口较大尺寸的1％

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

Answer 4

您可以使用 $（窗口）.outerWidth（）和 $（窗口）.outerHeight（） 您可以参考这些链接。 https://developer.mozilla.org/en-US/docs/Web/API/Window/outerHeight https://developer.mozilla.org/en-US/docs/Web/API/Window/outerWidth

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

4 个答案: