css中svh、lvh、dvh与vh有何区别？

Question

在移动端开发中，使用 `vh` 单位时常遇到页面视口高度不准确的问题，特别是在 Safari 浏览器中，由于地址栏和导航栏的显隐导致视口动态变化。为解决这一问题，CSS 引入了 `svh`、`lvh` 和 `dvh` 三个新单位。那么，`svh`、`lvh`、`dvh` 与传统的 `vh` 到底有何区别？它们分别代表什么场景下的视口高度？在实际布局中应如何选择？这些单位的浏览器兼容性如何？能否完全替代 `vh`？