使用clientWidth检测图片宽度适配文本Div，移动端旋转时尺寸滞后

嘿，我太懂这种头疼的情况了！这问题的核心原因其实是**orientationchange事件触发得太早**——当事件回调执行的时候，浏览器还没完成屏幕旋转后的布局重排，所以你拿到的图片尺寸还是旋转前的旧值，自然就会出现“滞后一次”的诡异现象。

给你几个亲测有效的解决方案：

1. 用requestAnimationFrame延迟获取尺寸 #

requestAnimationFrame会在浏览器下一次重绘前执行回调，这时候屏幕旋转后的布局已经更新完成，能拿到准确的图片尺寸：

window.addEventListener('orientationchange', () => {
  // 把尺寸获取逻辑放到下一次重绘前
  requestAnimationFrame(() => {
    const targetImg = document.getElementById('your-image-id');
    const textContainer = document.getElementById('your-text-div');
    
    textContainer.style.width = `${targetImg.clientWidth}px`;
    textContainer.style.height = `${targetImg.clientHeight}px`;
  });
});

2. 改用resize事件监听（配合防抖） #

屏幕旋转本质上属于窗口尺寸变化，resize事件会在浏览器完成布局调整后触发。不过要加个防抖，避免频繁触发：

let resizeTimer;
window.addEventListener('resize', () => {
  // 清除之前的定时器，避免重复执行
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
    const targetImg = document.getElementById('your-image-id');
    const textContainer = document.getElementById('your-text-div');
    
    textContainer.style.width = `${targetImg.clientWidth}px`;
    textContainer.style.height = `${targetImg.clientHeight}px`;
  }, 80); // 80ms足够浏览器完成布局更新，可根据实际调整
});

3. 使用matchMedia监听方向变化 #

matchMedia的change回调触发时机比orientationchange晚，布局已经稳定，也是个靠谱的选择：

// 监听竖屏状态（也可以改成landscape监听横屏）
const orientationQuery = window.matchMedia('(orientation: portrait)');

function syncContainerSize() {
  const targetImg = document.getElementById('your-image-id');
  const textContainer = document.getElementById('your-text-div');
  
  textContainer.style.width = `${targetImg.clientWidth}px`;
  textContainer.style.height = `${targetImg.clientHeight}px`;
}

// 方向变化时执行
orientationQuery.addEventListener('change', syncContainerSize);
// 页面初始加载时也要同步一次
syncContainerSize();

额外注意点 #

• 确保图片已经完全加载！如果图片还没加载完，clientWidth会返回0。可以在img.onload事件里先执行一次尺寸同步，或者判断document.readyState === 'complete'后再初始化逻辑。
• 如果你的图片是响应式的（比如用max-width:100%），可以考虑用getBoundingClientRect()替代clientWidth，它能更精准地获取元素的实际渲染尺寸。

内容的提问来源于stack exchange，提问作者Steve Price