横竖屏切换时布局错乱怎么解决？

Mr-歆艺提问于 2026-02-28 23:14:19 阅读 7

优化

我用 Vue 做了个移动端页面，横屏时内容被拉伸变形，竖屏又显示不全，试过用媒体查询但效果不稳定。有没有更可靠的适配方案？

目前是这样写的：

<template>
  <div class="container">
    <h1>欢迎使用</h1>
    <p>这是一段测试内容</p>
  </div>
</template>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  padding: 20px;
}
</style>

我来解答赞 5 收藏

反馈

1 条解答

金利 Lv1

你这个问题的根源在于 100vh 这个单位在移动端是个大坑。

移动端浏览器的地址栏会动态显示和隐藏，100vh 计算的是"完整视口高度"，但实际可视区域会因为地址栏的存在而变小。横竖屏切换时，这个差异就更明显了，导致内容溢出或者布局错乱。

解决方案是用 JavaScript 动态计算真实视口高度，然后通过 CSS 变量来设置。

先在你的入口文件或者组件里加上这段 JS：

const setVh = () => {

  const vh = window.innerHeight * 0.01

  document.documentElement.style.setProperty('--vh', ${vh}px)

}



setVh()

window.addEventListener('resize', setVh)

window.addEventListener('orientationchange', () => {

  setTimeout(setVh, 100)

})

注意 orientationchange 事件后面加了个 setTimeout，因为横竖屏切换时浏览器重新计算尺寸有延迟，不延时的话拿到的还是旧值。

然后 CSS 改成这样：

.container {

  width: 100%;

  height: 100vh;

  height: calc(var(--vh, 1vh) * 100);

  padding: 20px;

  box-sizing: border-box;

}

这里写两个 height 是为了兼容，如果 JS 变量没加载成功，至少还有 100vh 兜底。

另外你的 width: 100vw 也建议改成 width: 100%，100vw 在某些浏览器里会包含滚动条宽度，容易产生横向滚动条。

最后别忘了加个 box-sizing: border-box，不然 padding 会让实际高度超出容器，又得踩坑。

2026-03-01 04:04