Question

我正在使用的网页使用页面顶部的全屏图片标题。在移动设备上，当视图高度发生变化时，当URL栏在滚动时消失时图像调整大小存在问题，从而导致图像尺寸发生变化。我遇到了下面包含的代码段的变体，它完美地解决了这个问题，但它并没有解决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();
}

替代.resize（）for Chrome？

1 个答案: