用 vw 做响应式布局，为什么在移动端显示不正常？

迷人的泽铭提问于 2026-03-13 22:14:23 阅读 4

移动

我最近在用 vw 单位做响应式布局，想让元素宽度随屏幕变化，但在手机上测试时发现元素比预期大很多，甚至溢出屏幕。明明在桌面浏览器里看着没问题啊。

我试过用 100vw 当容器宽度，但 iOS Safari 和某些安卓机上好像把地址栏高度也算进去了？或者是不是我写法有问题？

<div style="width: 100vw; height: 50vh; background: lightblue;">
  这个盒子应该占满屏幕宽吧？
</div>

vw/vh 适配方案

我来解答赞 1 收藏

反馈

1 条解答

Zz珊珊 Lv1

问题在于 100vw 在移动端会把地址栏高度也算进去，导致溢出。

直接改用 width: 100% 代替 width: 100vw，或者用 width: 100dvw（动态视口宽度，Safari 14+ 支持）。

如果必须用 vw，可以这样写：

width: 100%;

/* 或者 */

width: 100dvw;

min-height: 100dvh;

box-sizing: border-box;

dvw 和 dvh 是动态视口单位，会自动排除地址栏，桌面浏览器也兼容。

2026-03-13 22:20