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

orientationchange这玩意儿确实不太靠谱，很多机型上触发时机有问题。直接用resize监听配合防抖，稳得多。

复制这个，替换你原来的rem设置逻辑：

function setRem() {

    var baseSize = 16;

    var baseWidth = 375;

    var clientWidth = document.documentElement.clientWidth;

    var scale = clientWidth / baseWidth;

    document.documentElement.style.fontSize = baseSize * scale + 'px';

}



var timer = null;

window.addEventListener('resize', function() {

    clearTimeout(timer);

    timer = setTimeout(setRem, 100);

});



setRem();

另外你那个viewport可以改成这样，横屏时限制一下最大宽度：

@media screen and (orientation: landscape) and (max-width: 812px) {

    html {

        max-width: 414px;

        margin: 0 auto;

    }

}

或者更省事，直接上vw方案，现在兼容性已经够用了，省得折腾这个破rem：

html {

    font-size: calc(100vw / 3.75);

}

设计图375宽的话，1rem就等于100px，写样式直接除以100换算。vw是视口单位，横竖屏切换自动适配，不用监听任何事件。

如果项目允许，建议直接换postcss-px-to-viewport插件，写px自动转vw，彻底告别手动计算rem的痛苦。

当时我也卡在这，用 rem 布局横竖屏切换时布局崩得特别彻底，尤其在 iOS 上 orientationchange 事件经常不触发或者触发时机不对，就算手动重设了 document.documentElement.style.fontSize，页面也不会立刻重排，视觉上还是乱的。

后来换了个思路，不再死磕 JS 动态计算，直接用 CSS 的 vw 单位 + clamp() 做响应式字体，或者更稳妥的方案是：用 meta viewport 的 initial-scale 动态适配 + CSS 的媒体查询做布局兜底。

最简单的做法是把 viewport 改成这样：

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

然后在 JS 里监听 resize 事件（比 orientationchange 更稳），重设根字体大小时别只改 fontSize，还要强制重绘：

function setRem() {

  const baseWidth = 375; // 设计稿宽度，比如 iPhone X

  const html = document.documentElement;

  const width = html.getBoundingClientRect().width;

  html.style.fontSize = (width / baseWidth) * 100 + 'px';

  // 关键：触发重排，避免 iOS 某些版本缓存布局

  void html.offsetWidth;

}



window.addEventListener('resize', setRem);

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

  setTimeout(setRem, 100); // 延一点时间，等方向真的变了再算

});

setRem(); // 初始化

不过如果项目允许，我建议直接上 flex + clamp 或者 grid 做响应式，rem 布局在横竖屏切换这种场景太容易翻车了，尤其横屏时屏幕宽度暴涨，你要是按竖屏的基准 rem 比例去算，字体和间距直接爆炸。

还有一种野路子：用 CSS 的 @media (orientation: landscape) 单独写一套横屏样式，比如：

@media (orientation: landscape) {

  .container { flex-direction: row; }

  h1 { font-size: clamp(16px, 4vw, 24px); }

}

这种组合用法比较稳，至少我现在的项目都是这么干的，横竖屏切换再也没崩过。