📅 最后修改于: 2023-12-03 15:15:39.788000 🧑 作者: Mango
在 HTML 中我们可以通过多种方式获取屏幕的尺寸，其中之一就是可用高度（Screen.availHeight）属性。该属性返回带有工具栏、滚动条和边框的屏幕高度减去系统使用的任务栏或应用程序窗口的高度。
下面是操作示例：
<!DOCTYPE html>
<html>
<head>
<title>屏幕可用高度</title>
</head>
<body>
<p>屏幕可用高度是： <span id="avail-height"></span></p>
<script>
document.getElementById('avail-height').innerHTML = screen.availHeight;
</script>
</body>
</html>
在上述示例中，我们使用 screen 对象获取了屏幕高度，然后使用该高度代替 span 元素中的文本内容，最终将可用高度显示在屏幕上。
值得注意的是，Screen.availHeight 的返回值可能会因为屏幕分辨率和浏览器有所不同。此外，有些浏览器默认情况下会隐藏浏览器工具栏和滚动条以最大化可见内容区域，因此这些浏览器可能会返回与实际尺寸不同的值。
总的来说，Screen.availHeight 属性是一个很有用的工具，可用于编写响应式设计并确保网站在各种设备上都能够正常工作，建议开发者在日常开发中重视它。