由于屏幕方向变化而调整大小后，如何获取元素的新尺寸？

我正在开发一个移动网络应用程序，在我的页面中我有一个div元素的宽度设置为 100%。

我需要设置这个的高度div以便高度对于设定的纵横比是正确的。例如，如果屏幕尺寸为 300 像素宽且比例为 3:2，我的脚本应该获取屏幕的宽度div（此时应为 300px）并将高度设置为 200px。

第一次加载时，效果非常好。但是，如果我将手机屏幕旋转为横向，则屏幕的宽度div显然发生了变化，所以我需要重置其高度以保持正确的比例。

我的问题是我找不到触发的事件after元素的大小被调整。有一个orientationchangejQuery Mobile 中内置的事件，当屏幕从纵向旋转到横向时会有效地触发，反之亦然：

$(window).bind('orientationchange', function (e) {

    // Correctly alerts 'landscape' or 'portrait' when orientation is changed
    alert(e.orientation); 

    // Set height of div
    var div = $('#div');
    var width = div.width();

    // Shows the *old* width, i.e the div's width before the rotation
    alert(width);

    // Set the height of the div (wrongly, because width is incorrect at this stage)
    div.css({ height: Math.ceil(width / ratio) });

});

不过这个活动好像很火before页面中的任何元素都已调整大小以适应新布局，这意味着（如评论中所述）我只能获取预旋转宽度div，这不是我需要的。

有谁知道我怎样才能得到div的新宽度，after东西已经调整大小了？

几个方法供你尝试：

(1)在你的内部设置一个超时orientationchange事件处理程序，以便 DOM 可以更新自身，并且浏览器可以在轮询新维度之前绘制所有更改：

$(window).bind('orientationchange', function (e) { 
    setTimeout(function () {
        // Get height of div
        var div   = $('#div'),
            width = div.width();

        // Set the height of the div
        div.css({ height: Math.ceil(width / ratio) });
    }, 500);
});

不会有太大的区别，但请注意Math.ceil完成（相对）比Math.floor因为后者只需删除小数点后的所有内容。我通常只是将未触及的浮点数传递给浏览器，然后让它在想要的地方舍入。

(2)使用window.resize事件来查看更新是否足够快：

$(window).bind('resize', function (e) { 
    // Get height of div
    var div   = $('#div'),
        width = div.width();

    // Set the height of the div
    div.css({ height: Math.ceil(width / ratio) });
});

在移动设备上，当方向改变时，这将触发，因为浏览器视口的大小也会改变。

(3)如果您要更新此大小<div>元素因为它包含图像，只需对图像应用一些 CSS 即可使其始终为全角和正确的宽高比：

.my-image-class {
    width  : 100%;
    height : auto;
}