不要用 100vh 做移动响应

返回：前端进阶

一般来说，我们使用 height:100vh 进行全屏布局，这是一种很方便的响应式方法。

.content {
  height: 100vh;
}

但当在实际设备上测试我们的设计时，我们遇到了几个问题。

• 大部分移动端的 Chrome 和 Firefox 浏览器在顶部都有一个 UI（地址栏等）。
• 在 Safari 浏览器上，地址栏在底部，这就变得更加棘手了。
• 不同的浏览器有不同大小的视口
• 移动设备计算浏览器视口为（顶栏+文档+底栏）=100vh
• 整个文档使用 100vh 填充到页面中

解决方案

通过 JS 检测应用程序的高度

const documentHeight = () => {
const doc = document.documentElement
doc.style.setProperty('--doc-height', `${window.innerHeight}px`)
}
window.addEventListener(‘resize’, documentHeight)
documentHeight()

使用 css 变量

:root {
  --doc-height: 100%;
}

html,
body {
  padding: 0;
  margin: 0;
  height: 100vh; /* fallback for Js load */
  height: var(--doc-height);
}