我有一个网页,在页面顶部有一个大的标题图像,占据了整个视图的宽度和高度。我在网上发现了一个非常有用的片段,它避免了移动的上url栏消失时发生的奇怪的大小调整问题。在包含下面的代码之前,当url栏消失时,标题图像的大小会增加,因为视图高度会变大。代码工作正常,除了问题仍然存在于iOS Chrome应用程序上。任何帮助在这里是非常感谢
我决定采取一种新的方法来解决这个问题,因为Safari和Chrome上的URL栏高度各不相同。这将导致不必要的复杂性,并且很难在两个浏览器上完美地进行调整。我正在采取的新方法是,在平板电脑或移动的上查看网页时,我想将高度设置为加载时的视图高度,并让它保持在该高度。我已经更新了下面的jQuery代码,但是它仍然不能按预期工作。
超文本标记语言:
<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();
型
}
1条答案
按热度按时间2nbm6dog1#
有没有尝试过媒体查询?这将比JS监听浏览器大小更好,你可以针对特定的浏览器。
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries