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.
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
Post a Comment