JavaScript 如何準確地確定瀏覽器視窗尺寸？

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

偵測使用者瀏覽器視窗的大小對於提供最佳內容體驗至關重要。了解視口大小允許網站顯示高品質圖像並根據設備限制調整佈局。 JavaScript 提供了一系列技術來確定視口尺寸。

跨瀏覽器@media 和@media 值

為了跨瀏覽器相容性，您可以使用CSS @用於獲取視口尺寸的媒體規則：

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

window.innerWidth和window.innerHeight

這些屬性傳回視口寬度和高度，包括捲軸：

• 取得CSS視口尺寸。
• 可能提供不準確的值移動設備由於縮放。
• 縮放調整可能會引入 1px offset。
• IE8 或更早版本不支援。

document.documentElement.clientWidth 和.clientHeight

這些屬性提供視窗寬度高度減去滾動條寬度：

• 符合@media 值不存在捲軸。
• 相當於 jQuery 的視窗寬度值。
• 可用的跨瀏覽器。
• 如果缺少 DOCTYPE 聲明，可能不準確。

額外資源

• 即時視窗尺寸輸出：[連結]
• Verge.js（跨瀏覽器視窗技術）：[連結]
• Actual.js （任何單位的精確視口尺寸）：[連結]

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