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

我正在研究一个项目，其中包括几个使用jQuery-UI的可拖动div的约束功能，以帮助用户避免迷离divs躲在郊外。获取用户浏览器窗口的最大视口大小

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

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

这是非常接近我的愿望......然而，因为所有的浏览器有标签和搜索的顶部输入线并经常在底部的其他东西，我得到比实际的视图端口更大的约束。那你说让视口尺寸：

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

嗯，这是接近，但不是100％......因为如果用户进入该版块的端口尺寸要到现场时，有一个最小化的窗口是约束大小..这意味着如果用户使用全屏幕，则约束与视图端口从一开始就一样大。

那么你可能会说：“为什么不前进的道路上动态地改变约束？”

嗯......这本来是一个可能性，但这一整页思路是微调GUI和改变约束的大小可能会扰乱可拖动对象的位置。所以我要求什么？

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

所有帮助表示赞赏。

PS。我想我可以检查用户正在使用哪个浏览器，并通过硬编码删除特定浏览器头栏正在使用的像素数量......在我的书中有多种原因是由于几个原因导致的。

编辑：错别字在标题捂脸

EDIT2：我没有类型以及

来源

2017-03-16 Olof

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

来源

2017-03-16 08:38:08

这不起作用。它正确地获取视图端口的内部维度，但如果我输入的网站窗口小于全屏，它将获得这些内部维度。如果我然后扩大我的浏览器窗口的“小窗口”约束仍然存在...... HENCE我要求的潜在全屏视图端口的当前用户屏幕大小的内部视图端口尺寸.... – Olof

..所以这是在正确的轨道上。像这样的伪代码应该工作：屏幕rez - （外部浏览器测量 - 内部浏览器测量） – Olof

虽然漂亮哈克，你可以利用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

来源

2017-03-16 08:40:49 Mawcel

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

来源

2017-03-16 09:23:21 SreenathPG

有一些很好的建议指着我在正确的方向我现在已经明白了我的问题。我想。

这两个坏孩子实际上做的伎俩：

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

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

来源

2017-03-16 10:03:20 Olof

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

回答

相关问题