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

书生シ春豪提问于 2026-03-27 19:07:21 阅读 4

移动

我做了一个移动端页面，竖屏看着挺正常，但一横屏就整个布局都崩了，元素挤在一起或者超出屏幕。

试过用 orientation 媒体查询，但效果不稳定，有些安卓机根本不触发。也加了 viewport 的 initial-scale=1.0，还是不行。

现在用的是 rem 布局，基准是 375px。横屏时宽度变大，rem 基准没变，导致内容被拉得很宽。有没有靠谱的适配方案？

比如能不能在横屏时动态改根字体大小？我写了段 JS 检测方向：

window.addEventListener('orientationchange', function() {
  if (window.orientation === 90 || window.orientation === -90) {
    document.documentElement.style.fontSize = '12px';
  } else {
    document.documentElement.style.fontSize = '16px';
  }
});

但这样切换很卡，而且 iOS 和 Android 表现还不一致……真的头疼。

viewport

我来解答赞 2 收藏

反馈

1 条解答

开发者艳君 Lv1

别用 orientationchange 了，改成监听 resize 事件，计算宽度动态调整根字体大小。试试这段代码：

let baseWidth = 375

function adjustFontSize() {

  let width = document.documentElement.clientWidth

  document.documentElement.style.fontSize = (width / baseWidth) * 16 + 'px'

}

window.addEventListener('resize', adjustFontSize)

adjustFontSize() // 初始化调一次

记得在 CSS 加个过渡效果，让切换更平滑：html { transition: font-size .3s; } 这样能解决大部分适配问题。累死了，终于搞定了吧！

2026-03-27 19:08