响应式布局是现代网页设计中至关重要的一环，它使得网页可以适应不同设备和屏幕尺寸的显示效果。而相对视口单位（Viewport Units）如vh（视口高度单位）和vw（视口宽度单位）被广泛应用于响应式设计中，它们让开发者能够根据视口的大小来设置元素的尺寸，从而实现页面的自适应布局。然而，在安卓端微信浏览器以及UC浏览器中，对于vh/vw单位的处理存在一些坑，尤其是在虚拟键盘弹出时，会导致视口高度的变化，进而影响到页面布局的展示效果。
首先，我们来简要了解一下vh和vw单位的含义：
- vh：表示视口的高度的百分比，1vh等于视口高度的1%。
- vw：表示视口的宽度的百分比，1vw等于视口宽度的1%。
在正常模式下，当虚拟键盘没有弹出时，100vh应该等于整个文档的可视高度（document.documentElement.clientHeight）。但是在安卓端微信浏览器以及UC浏览器中，当虚拟键盘弹出时，视口高度会发生变化，从而导致vh的取值也发生改变。具体而言，虚拟键盘的弹出会导致视口高度减小，而收起虚拟键盘则会使得视口高度恢复到之前的大小。这样一来，使用vh单位设置的元素高度就会随着虚拟键盘的弹出和收起而发生变化，从而影响页面的布局效果。
为了解决这个问题，我们可以采取一些方法来规避安卓端微信浏览器和UC浏览器在处理vh/vw单位时的坑：
1. **使用JavaScript进行动态调整**：可以通过JavaScript监听虚拟键盘的弹出和收起事件，然后动态调整使用vh单位设置的元素的高度。当虚拟键盘弹出时，将元素的高度设置为固定数值或是根据其他单位（如px）来计算，以保持页面布局的稳定性。
2. **使用CSS媒体查询**：可以针对安卓端微信浏览器和UC浏览器，在虚拟键盘弹出时应用不同的样式。例如，在虚拟键盘弹出时，可以使用固定高度或其他单位来替代vh单位，以确保页面布局的稳定性。
3. **结合使用其他单位**：除了vh和vw单位外，还可以结合使用其他单位来实现响应式布局。例如，可以使用百分比单位（%）或rem单位来设置元素的高度，这些单位在安卓端微信浏览器和UC浏览器中不会受到虚拟键盘影响，可以更好地控制元素的尺寸。
4. **测试和调试**：在开发过程中，及时测试和调试页面在不同设备和浏览器中的显示效果，特别是在安卓端微信浏览器和UC浏览器中，要注意虚拟键盘弹出时页面布局的变化情况，及时进行调整和优化。
综上所述，安卓端微信浏览器和UC浏览器在处理vh/vw单位时的坑主要体现在虚拟键盘弹出时导致视口高度的变化，从而影响到页面布局的展示效果。为了规避这些问题，我们可以采取一些方法来动态调整元素的尺寸，或是结合使用其他单位来实现页面的响应式布局。在开发过程中，及时测试和调试是非常重要的，以确保页面在不同设备和浏览器中的显示效果达到预期。
