替代.resize（）適用於Chrome嗎？

我有一個網頁，我正在使用頁面頂部的全屏圖像標題。在移動設備上，圖片大小調整時會出現問題，因爲視圖高度會發生變化，導致圖片尺寸發生變化，因此URL滾動條會在滾動中消失。我遇到了以下代碼片段的一個變體，它完美地解決了這個問題，但它不能解決iOS Chrome應用程序中的問題。我發現原因是因爲Chrome不支持這個.resize()函數。我想知道是否有人知道這是由鉻支持的替代方案？我還會加入與這種情況相關的HTML。替代.resize（）適用於Chrome嗎？

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

來源

2017-04-18 S. Miller

@razorsyntax這個人不知道如何調整窗口的大小。我想弄清楚如何在Chrome中調整窗口大小的功能。 –

所以聽滾動也在移動 – epascarello

嘗試使用setInterval函數 - setInterval（function（）{resizeBackground（）;}，1000）; – Victoria

我決定來解決這個問題的最好辦法是設置在頁面加載到視圖高度的高度在平板電腦上觀看時，或更小的設備。

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

來源

2017-04-20 18:40:02

替代.resize（）適用於Chrome嗎？

回答

相關問題