Chrome替代.resize()？

Question

我有一个网页，我正在工作，利用全屏图像标题在页面顶部。在移动平台上，当地址栏将随着视图高度的变化而消失时，图像大小调整会出现问题，从而导致图像尺寸的变化。我看到了下面包含的代码片段的一个变体，它完美地解决了问题，但是它并没有解决iOS Chrome应用程序上的问题。我发现这是因为Chrome不支持这个.resize()功能。我想知道是否有人知道这是由铬支持的替代方案？我还将包括与本例相关的HTML。

HTML：

<div class="intro-bg">
            <div class="intro-bg-item"> 
                <div class="intro-bg-item-image" style="background-image: url(css/images/pb/home-banner.jpg)"></div><!-- /.intro-bg-item-image -->
            </div><!-- /.intro-bg-item -->

        </div><!-- /.intro-bg -->

jQuery：

var bg = $(".intro-bg-item-image, .intro-bg-item, .intro-bg, .caroufredsel_wrapper");

function resizeBackground() {
    bg.height( $(window).height() + 60);
}

$(window).resize(resizeBackground);
resizeBackground();

Answer 1

我已经决定，解决这个问题的最好方法是在平板电脑或较小的设备上查看时，将页面加载的高度设置为视图高度。

jQuery：

if ($(window).width() <= 1024) {
    var bg = $(".intro-bg-item-image, .intro-bg-item, .intro-bg, .caroufredsel_wrapper");
    function resizeBackground() {
        bg.height( $(window).height());
    }
    $(window).load(resizeBackground);
    resizeBackground();
}