獲取用戶瀏覽器窗口的最大視口大小

我正在研究一個項目，其中包括幾個使用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

獲取用戶瀏覽器窗口的最大視口大小

回答

相關問題