javascript - 由于屏幕方向更改而调整大小*后，如何获取元素的新尺寸*？

Question

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

我需要设置此 div 的高度，以便高度适合设置的纵横比。因此，例如，如果屏幕大小为 300 像素宽且比例为 3:2，我的脚本应获取 div 的宽度(此时应为 300px)并设置高度到 200 像素。

在第一次加载时，这完美地工作。但是，如果我将手机屏幕旋转为横向，div 的宽度明显发生变化，因此我需要重新设置它的高度以保持正确的比例。

我的问题是我找不到在调整元素大小后触发的事件。 jQuery Mobile 中内置了一个 orientationchange 事件，当屏幕从纵向旋转到横向时会触发该事件，反之亦然:

$(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) });

});

但此事件似乎在页面中的任何元素调整大小以适应新布局之前触发，这意味着(如评论中所述)我只能获得预旋转宽度div，这不是我需要的。

有谁知道div 的新宽度，在 调整了自己的大小之后？

Answer 1

几种方法供您尝试:

(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 需要更长的时间才能完成(相对)因为后者只需要删除小数点后的所有内容。我通常只是将未触及的 float 传递给浏览器，然后让它绕到它想要的位置。

(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) });
});

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

(3) 如果您要更新此 <div> 的大小元素，因为它包含图像，只需对图像应用一些 CSS 以使其始终为全 Angular 和正确的纵横比:

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