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

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

优化

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

目前是这样写的：

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

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

我来解答赞 10 收藏

反馈

2 条解答

UX-旭来 Lv1

移动端横竖屏适配确实是个坑，我最近刚踩过。按照规范来说，vw/vh单位在某些安卓机型上会有兼容问题，特别是键盘弹出时。

建议用rem方案配合viewport meta标签，这样更可靠：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

然后在CSS里改写成这样：

.container {

  width: 100%;

  min-height: 100%;

  padding: 1rem;

  box-sizing: border-box;

}

另外记得在main.js里设置根字体大小，比如：

document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px'

这个7.5是设计稿宽度除以100的值，比如750px设计稿就除7.5。这样1rem=100px，换算方便。

还有个坑是ios的viewport单位会包含地址栏高度，可以加个js监听resize事件动态调整。

2026-03-09 23:06

金利 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