如何在*因屏幕方向改变而调整大小后获得元素*的新尺寸？ [英] How do I get the new dimensions of an element *after* it resizes due to a screen orientation change?

问题描述

我正在使用移动网络应用，在我的网页中，我有一个 div 元素，其宽度设置为100％。

我需要设置此 div 的高度，以便设置纵横比的高度正确。因此，例如，如果屏幕大小为300像素宽且比例为3：2，我的脚本应该抓住 div 的宽度（此时应该是300px）并将高度设置为200px。

首次加载时，这非常有效。但是，如果我将手机的屏幕旋转为横向， div 的宽度显然会发生变化，因此我需要重置其高度以保持正确的比例。 / p>

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

  $（窗口）.bind（'orientationchange'，function（e）{
 
 //正确警告'风景'或'肖像'时方向改变
 alert（e.orientation）; 
 
 //设置div的高度
 var div = $（'＃div'）; 
 var width = div.width（）; 
 
 //显示* old * width，即旋转前的div宽度
 alert（width）; 
 
 // Set div的高度（错误地，因为在这个阶段宽度不正确）
 div.css（{height：Math.ceil（width / ratio）}）; 
 
}）; 
  

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

有谁知道如何获得 div 的新宽度 之后的事情已经调整好了吗？

解决方案

有几种方法可以尝试：

（1）在 orientationchange 事件处理程序中设置超时，以便DOM可以自行更新，浏览器可以在您之前绘制所有更改民意调查：

  $（窗口）.bind（'orientationchange'，function（e）{
 setTimeout（function（）{
 //获取div的高度
 var div = $（'＃div'），
 width = div.width（）; 
 
 //设置div 
的高度div.css（{height：Math.ceil（width / ratio）}）; 
}，500）; 
}）; 
  

它不会产生太大差异，但请注意数学。 ceil 完成（相对）比 Math.floor 需要更长的时间，因为后者只需要删除小数点后的所有内容。我通常只是在浏览器中传递未触摸的浮动数字，并将其放在想要的位置。

（2）使用 window.resize 事件而不是查看更新是否足够快：

  $（window）.bind（'resize'，function（e）{
 //获得div的高度
 var div = $（'＃div'），
 width = div.width （）; 
 
 //设置div的高度
 div.css（{height：Math.ceil（width / ratio）}）; 
}）; 
  

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

（3）如果您要更新此< div> 元素，因为它包含一个图像，只需将一些CSS应用于图像，使其始终为全宽和正确的宽高比：

  .my-image-class {
宽度：100％; 
身高：汽车; 
} 
  




I'm working on a mobile web app, and in my page I have a div element with its width set to 100%.

I need to set the height of this div so that the height is correct for a set aspect ratio. So for example, if the screen was sized to 300 pixels wide and the ratio was 3:2, my script should grab the width of the div (which at this point should be 300px) and set the height to 200px.

On first load, this works perfectly. However, if I rotate the screen of my phone to landscape, the width of the div obviously changes, so I need to reset its height in order to keep the correct ratio.

My problem is that I can't find an event which fires after the elements are resized. There is an orientationchange event built into jQuery Mobile, which helpfully fires when the screen is rotated from portrait to landscape and vice-versa:

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

});

But this event seems to fire before any of the elements in the page have resized to fit the new layout, which means (as mentioned in the comments) I can only get the pre-rotation width of the div, which is not what I need.

Does anyone know how I can get the div's new width, after things have resized themselves?

解决方案

A few methods for you to try:

(1) Set a timeout inside your orientationchange event handler so the DOM can update itself and the browser can draw all the changes before you poll for the new dimension:

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

It won't make too big of a difference but note that Math.ceil takes a lot longer to complete (relatively) than Math.floor since the latter only has to drop everything after the decimal point. I generally just pass the browser the un-touched float number and let it round where it wants to.

(2) Use the window.resize event instead to see if that updated fast enough for you:

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

On a mobile device this will fire when the orientation changes since the size of the browser view-port will also change.

(3) If you are updating the size of this <div> element because it holds an image, just apply some CSS to the image to make it always be full-width and the correct aspect ratio:

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

这篇关于如何在*因屏幕方向改变而调整大小后获得元素*的新尺寸？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！