移动端二次加载网站显示异常：Android端Firefox/Chrome布局错乱

首先，我一眼就看出问题所在了——你的jQuery代码在图片还没完全加载的时候就执行了高度计算，这在Android的Chrome/Firefox里尤为明显（桌面端因为缓存或者更快的加载速度，往往不会触发这个问题）。当页面刷新时，浏览器重新请求图片，而你的代码在DOM就绪就运行，此时图片资源还没下载完成，.jumbotron-img的自然高度还没被浏览器渲染出来，所以innerHeight()返回0，导致#header-img-container的高度被设为视口高度，内容就顶上去了。滚动页面时浏览器触发重排，图片高度被正确计算，布局才恢复正常。另外看你的HTML代码开头有个多余的</div>，虽然不影响这个Bug，但建议清理掉，避免潜在的布局问题。

下面给你几个靠谱的解决办法，按推荐程度排序：

1. 监听图片的load事件再计算高度 #

把你的计算逻辑绑定到图片的加载完成事件上，确保只有当图片完全加载后才执行高度计算：

// 监听目标图片的加载事件
$('.jumbotron-img').on('load', function() {
  var viewportHeight = $(window).outerHeight();
  var imgHeight = $(this).innerHeight();
  var height = viewportHeight < imgHeight ? viewportHeight : imgHeight;
  $('#header-img-container').css('height', height);
});

// 额外处理：如果图片已经在缓存中（比如刷新后），load事件可能不会触发，所以手动检查一次
if ($('.jumbotron-img')[0].complete) {
  $('.jumbotron-img').trigger('load');
}

这个方案最精准，只会在目标图片加载完成后执行计算，不会延迟其他页面逻辑。

2. 改用window.load事件代替DOM就绪 #

window.load会等待所有资源（包括图片、样式表）加载完成后再执行，这样也能确保图片高度已经被正确计算：

$(window).on('load', function() {
  var height = $(window).outerHeight() < $('.jumbotron-img').innerHeight() ? $(window).outerHeight() : $('.jumbotron-img').innerHeight();
  $('#header-img-container').css('height', height);
});

注意：这个方法会延迟代码执行时间，直到所有资源加载完毕，如果你页面有其他不需要等资源的逻辑，建议分开写。

3. 用CSS替代JS计算（更优雅的无JS方案） #

其实你这个需求可以完全不用JS，用CSS就能实现：让#header-img-container的高度至少是视口高度，同时不超过图片的实际高度。可以这样写：

#header-img-container {
  min-height: 100vh;
  max-height: fit-content;
  overflow: hidden; /* 可选，防止图片溢出容器 */
}
.jumbotron-img {
  width: 100%;
  height: auto;
}

如果需要图片保持比例并填满容器，还可以搭配object-fit：

#header-img-container {
  min-height: 100vh;
  position: relative;
}
.jumbotron-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 或contain，根据需求选择 */
}

纯CSS方案更稳定，避免了JS依赖和加载时序问题，是长期维护的最优解。

最后再提醒一下：移动端浏览器的图片加载机制和桌面端有差异，尤其是刷新时的缓存策略，所以永远不要假设DOM就绪时图片已经加载完成，一定要确保图片资源加载后再做尺寸相关的计算。

内容的提问来源于stack exchange，提问作者O Max Anderson