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

___东俊提问于 2026-03-30 11:32:16 阅读 4

优化

我在做移动端页面，用的是 rem 布局，横屏时内容被拉得很宽，元素都挤在一起了，看着特别乱。试过用 @media (orientation: landscape) 单独写样式，但效果不稳定，有些机型根本不生效。

目前 viewport 是这样设置的：<meta name="viewport" content="width=device-width, initial-scale=1.0">，是不是还需要加别的属性？或者有没有更通用的适配方案？

比如下面这段媒体查询，在 iPhone 上横屏能识别，但在某些安卓机上完全没反应：

@media screen and (orientation: landscape) {
  html {
    font-size: 12px;
  }
}

横竖屏适配移动端优化

我来解答赞 2 收藏

反馈

1 条解答

UP主～正汉 Lv1

直接这样，在 viewport 里加上 maximum-scale=1.0 和 user-scalable=no，再用 vh 和 vw 来替代 rem 做尺寸单位。记得给根元素设置固定宽高比，比如：

html {

  width: 100vw;

  height: 100vh;

  font-size: calc(100vw / 37.5); /* 基于设计稿宽度调整 */

}

@media screen and (orientation: landscape) {

  html {

    font-size: calc(100vh / 37.5); /* 横屏时切换基准 */

  }

}

这个方案兼容性更好，别纠结 rem 了，viewport 设置成这样：

2026-03-30 12:00