vw/vh在移动端适配时为什么有时候失效？

长孙秀云提问于 2026-03-16 09:54:20 阅读 58

移动

我用 vw 做了一个全屏的卡片组件，但在某些安卓机上高度明显不对，vh 好像没生效。试过加 meta viewport 了，还是不行。

这是我的 Vue 组件代码：

<template>
  <div class="full-screen-card">
    <h2>欢迎</h2>
  </div>
</template>

<style scoped>
.full-screen-card {
  width: 100vw;
  height: 100vh;
  background: #f0f0f0;
}
</style>

在 iPhone 上显示正常，但在一些老款安卓机（比如华为 P20）上，底部会被导航栏挡住，实际高度比屏幕小。是不是 vh 在有虚拟导航栏的设备上有坑？该怎么解决？

我来解答赞 2 收藏

反馈

暂无解答