jQuery调整大小功能在Chrome中不起作用 [英] jQuery resize function not working in Chrome

问题描述

我有一个网页，该网页的顶部页眉图像很大，占据了整个视图的宽度和高度.我在网上找到了一个非常有用的代码段，该代码段避免了网址栏消失时在移动设备上发生的奇怪的调整大小问题.在添加下面的代码之前，URL栏消失时，标题图像的大小会增加，因为视图高度会变大.该代码可以正常运行，除非问题在iOS Chrome应用上仍然存在.非常感谢这里的任何帮助

I have a webpage with a large header image at the top of the page that occupies the entire view width and height. I found a very helpful snippet online that avoided the strange resizing issue that happens on mobile when the url bar disappears. Before including the code below, the header image would increase in size when the url bar disappeared because the view height would become larger. The code works perfectly except the problem persists on iOS Chrome app. Any help here is greatly appreciated

由于野生动物园和Chrome浏览器的网址栏高度不同，因此我决定采用新方法来解决此问题.这将导致不必要的复杂性，并且很难在两个浏览器上完美地进行调整.我采用的新方法是，在平板电脑或移动设备上查看网页时，我想将高度设置为加载时的视图高度，并将其保持在该高度.我已经将下面的jQuery代码更新到目前为止，但是仍然无法按预期工作.

I have decided to take a new approach to solving this problem since the URL bar height on safari and chrome vary. This would cause unwanted complications and it would be difficult to have the adjustment work perfectly on both browsers. The new approach I am taking is that when viewing the webpage on tablet or mobile, I would like to set the height to the view height on load and have it stay at that height. I have updated the jQuery code below to what I have so far, however it still does not work as 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();

}

推荐答案

是否需要尝试媒体查询?这比让JS侦听浏览器调整大小要轻而易举，您可以针对特定的浏览器.

Have to tried media queries? It would be liter than having JS listen for the browser resize and you could target specific browsers.

https://developer.mozilla.org/en -US/docs/Web/CSS/Media_Queries/Using_media_queries

这篇关于jQuery调整大小功能在Chrome中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！