Cordova Android锁定屏幕方向后无法获取正确屏幕尺寸的问题

我之前也踩过这个坑！问题的核心是：screen.orientation.lock()的then()回调只是告诉你锁定请求成功了，但此时浏览器还没完成实际的屏幕布局重排，window.screen的尺寸还是缓存的旧值，得等浏览器把方向切换的布局操作做完才能拿到正确数值。

这里给你两个靠谱的解决方案：

方案1：监听方向/尺寸变化事件 #

屏幕锁定方向后，浏览器会触发orientationchange和resize事件，我们可以在这些事件的回调里读取最新尺寸：

console.log(window.screen.width); // 初始值450
screen.orientation.lock('landscape').then(() => {
    const getUpdatedSize = () => {
        console.log(window.screen.width); // 此时会是正确的640
        // 记得移除监听，避免后续重复触发
        window.removeEventListener('orientationchange', getUpdatedSize);
        window.removeEventListener('resize', getUpdatedSize);
    };

    // 同时监听两个事件，确保覆盖所有浏览器的触发逻辑
    window.addEventListener('orientationchange', getUpdatedSize);
    window.addEventListener('resize', getUpdatedSize);
});

方案2：用requestAnimationFrame等待布局更新 #

如果觉得事件监听有点繁琐，可以用requestAnimationFrame——它会在浏览器完成下一帧渲染（也就是布局更新后）执行回调：

console.log(window.screen.width); // 初始值450
screen.orientation.lock('landscape').then(() => {
    // 等待下一帧渲染完成
    requestAnimationFrame(() => {
        console.log(window.screen.width); // 正确的640
    });
});

注：极少数场景下可能需要嵌套两次requestAnimationFrame，如果一次不行可以试试，但90%以上的情况一次就足够了。

本质上两种方法都是在等浏览器完成方向切换的布局流程，避免在锁定请求刚成功就急着读尺寸——那时候布局还没跟上呢！

内容的提问来源于stack exchange，提问作者Brian Mayo