js怎么获取100vh的高度

通过JavaScript获取100vh的高度，可以使用window.innerHeight属性，该属性返回窗口的视口高度。获取100vh的高度在网页设计和开发中非常重要，特别是在响应式设计中。了解这一点可以帮助你在不同设备和屏幕尺寸上创建更加灵活和一致的用户体验。

例如，假设你正在开发一个全屏的英雄图片或者视频背景，你希望这个背景元素始终占据整个视口的高度，无论用户使用的是桌面设备、平板电脑还是手机。通过JavaScript获取100vh的高度，可以确保你的布局在所有设备上都能正确显示。

const viewportHeight = window.innerHeight;
console.log(viewportHeight);

一、什么是100vh

100vh表示视口高度的100%，即整个浏览器窗口的高度。视口是指浏览器窗口的可视区域，vh单位是相对于视口高度的百分比。

全屏背景：在创建全屏背景时，100vh可以确保背景图像或视频始终覆盖整个视口。
弹性布局：在响应式设计中，100vh可以帮助创建高度自适应的布局，从而提升用户体验。
固定窗口内容：在某些情况下，例如全屏模态窗口、全屏导航菜单等，使用100vh可以确保这些元素始终覆盖整个视口。

二、获取100vh高度的实际应用

1、设置全屏背景

在网页开发中，全屏背景图像或视频是一个常见的需求。通过JavaScript获取100vh的高度，可以确保背景元素在不同设备上都能正确显示。

document.addEventListener('DOMContentLoaded', (event) => {
    const fullscreenElement = document.querySelector('.fullscreen');
    fullscreenElement.style.height = `${window.innerHeight}px`;
});

在CSS中，你可以设置.fullscreen类的背景图像或视频：

.fullscreen {
    background-image: url('background.jpg');
    background-size: cover;
    background-position: center;
}

2、响应式设计中的应用

在响应式设计中，确保某些元素的高度始终与视口高度一致，可以提升用户体验。例如，创建一个全屏的英雄部分，包含标题、描述和一个按钮。

document.addEventListener('DOMContentLoaded', (event) => {
    const heroSection = document.querySelector('.hero');
    heroSection.style.height = `${window.innerHeight}px`;
});

CSS样式：

.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

3、处理视口高度变化

在某些情况下，视口高度可能会动态变化，例如当用户旋转设备时。为了确保布局在这种情况下仍然正确，可以监听resize事件，并在视口高度变化时更新元素的高度。

function setFullHeight() {
    const heroSection = document.querySelector('.hero');
    heroSection.style.height = `${window.innerHeight}px`;
}
window.addEventListener('resize', setFullHeight);
document.addEventListener('DOMContentLoaded', setFullHeight);

三、与CSS结合使用

虽然JavaScript可以动态获取和设置元素的高度，但在某些情况下，使用CSS中的vh单位可能更简洁和高效。以下是一些使用vh单位的示例：

1、全屏背景

.fullscreen {
    height: 100vh;
    background-image: url('background.jpg');
    background-size: cover;
    background-position: center;
}

2、全屏模态窗口

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

四、注意事项

1、兼容性问题

虽然大多数现代浏览器都支持vh单位，但在一些较旧的浏览器中可能会有兼容性问题。在这种情况下，可以使用JavaScript作为后备方案。

2、性能问题

频繁监听resize事件并更新元素的高度可能会影响性能，特别是在低性能设备上。为了提高性能，可以使用防抖或节流技术。

function debounce(func, wait) {
    let timeout;
    return function() {
        clearTimeout(timeout);
        timeout = setTimeout(func, wait);
    };
}
window.addEventListener('resize', debounce(setFullHeight, 200));

3、视口高度的变化

在某些设备上，视口高度可能会随着软键盘的显示和隐藏而变化。为了处理这种情况，可以在软键盘显示时调整布局。

window.addEventListener('resize', () => {
    if (window.innerHeight < 500) {
        // Soft keyboard is likely visible
        document.body.classList.add('keyboard-open');
    } else {
        document.body.classList.remove('keyboard-open');
    }
});

五、综合应用

综合以上内容，我们可以创建一个响应式的全屏英雄部分，包含背景图像、标题、描述和按钮。以下是完整的HTML、CSS和JavaScript代码：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Full Screen Hero</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="hero">
        <h1>Welcome to Our Website</h1>
        <p>Your success is our priority.</p>
        <button>Get Started</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS（styles.css）：

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.hero {
    height: 100vh;
    background-image: url('background.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    color: white;
}
.hero h1 {
    font-size: 3rem;
    margin: 0 0 1rem;
}
.hero p {
    font-size: 1.5rem;
    margin: 0 0 2rem;
}
.hero button {
    padding: 1rem 2rem;
    font-size: 1rem;
    cursor: pointer;
}

JavaScript（script.js）：

function setFullHeight() {
    const heroSection = document.querySelector('.hero');
    heroSection.style.height = `${window.innerHeight}px`;
}
window.addEventListener('resize', debounce(setFullHeight, 200));
document.addEventListener('DOMContentLoaded', setFullHeight);
function debounce(func, wait) {
    let timeout;
    return function() {
        clearTimeout(timeout);
        timeout = setTimeout(func, wait);
    };
}

通过以上代码示例，我们可以确保在不同设备和屏幕尺寸上，全屏英雄部分始终占据整个视口高度，从而提升用户体验。

六、总结

通过JavaScript获取100vh的高度是网页开发中非常有用的技巧，特别是在响应式设计中。确保全屏背景、全屏模态窗口、响应式布局等元素在不同设备上都能正确显示，可以显著提升用户体验。结合CSS中的vh单位和JavaScript，可以创建更加灵活和一致的布局。