标签：javascript jquery mobile jquery-mobile

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

我需要设置这个div的高度,以便高度对于设定的宽高比是正确的.因此,例如,如果屏幕大小为300像素宽且比例为3：2,我的脚本应该抓住div的宽度(此时应该是300px)并将高度设置为200px.

在第一次加载时,这非常有效.但是,如果我将手机的屏幕旋转到横向,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的新宽度？

解决方法:

一些方法供您尝试：

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

标签：javascript,jquery,mobile,jquery-mobile
来源： https://codeday.me/bug/20190726/1539432.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。