如何使用 JavaScript 取得瀏覽器視窗尺寸？

如何取得瀏覽器視窗的尺寸

背景：

背景：

瀏覽器顯示顯示內容在稱為「視口」的指定區域內。該區域不包括網址列、工具列和其他 UI 元素。在某些場景下，開發者可能需要確定視窗的確切大小，以便為使用者提供最佳的觀看體驗。

解決方案：

有多種方法可以擷取使用 JavaScript 的瀏覽器視窗尺寸：

let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
let vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)

1。跨瀏覽器@media（寬度）和@media（高度）值：

2。 window.innerWidth 和 window.innerHeight：

這些屬性直接傳回 CSS 視窗的寬度和高度，包括捲軸。但請注意，由於縮放問題，這些值在行動裝置上可能會有所不同。

3. document.documentElement.clientWidth 和 .clientHeight:

這些屬性計算視窗的寬度和高度，不包括滾動條寬度。當沒有捲軸時，它們與 @media 值對齊。

• 其他資訊：
• 上面概述的方法是跨瀏覽器相容並得到廣泛支援。

線上提供資源測試各種視窗的即時輸出尺寸。 「verge」和「actual」等第三方函式庫提供了方便的抽象，可以以任何所需的測量單位取得準確的視口尺寸。

以上是如何使用 JavaScript 取得瀏覽器視窗尺寸？的詳細內容。更多資訊請關注PHP中文網其他相關文章！