javascript - jQuery resize function not working in Chrome -


i have webpage large header image @ top of page occupies entire view width , height. found helpful snippet online avoided strange resizing issue happens on mobile when url bar disappears. before including code below, header image increase in size when url bar disappeared because view height become larger. code works except problem persists on ios chrome app. here appreciated

i have decided take new approach solving problem since url bar height on safari , chrome vary. cause unwanted complications , difficult have adjustment work on both browsers. new approach taking when viewing webpage on tablet or mobile, set height view height on load , have stay @ height. have updated jquery code below have far, still not work expected.

link webpage

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:

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

}

have tried media queries? liter having js listen browser resize , target specific browsers.

https://developer.mozilla.org/en-us/docs/web/css/media_queries/using_media_queries


Comments

Popular posts from this blog

php - Permission denied. Laravel linux server -

google bigquery - Delta between query execution time and Java query call to finish -

python - Pandas two dataframes multiplication? -