Jquery Mobile Header中的图像与主要内容重叠

Question

我正在开发一个Cordova项目，使用jQuery Mobile构建用户界面（使用其中任何一个的第一个项目），并且我在向标题添加徽标图像时遇到问题。

由于它使标题大于默认值，因此标题与主div中的内容重叠，如此捕获：

如果我导航到其他页面并返回到此页面，那么一切看起来应该是：

我读过when jQuery Mobile initializes the page, the header image is not loaded and the header is much smaller，所以我试过

这是我的图片html：

<div data-role="header" data-id="header" data-position="fixed">
  <h1>
    <img src="img/flycosette_logo-88cb7efa9f6acfcaf246f8523e87805d.png" alt="FlyCosette"/>
  </h1>
</div><!-- /header -->

这是我在jQM文件后调用的自定义文件中的css：

.ui-header img {
  width: 100%;
}

我在引用的链接中尝试了这种方法：

$(window).on('load', function () {
  $(this).trigger('resize');
});

但它对我不起作用。

我还尝试将图片放在div内，而不是<h1>，并为其设置代码而不是图像，播放多个属性，但它无法解决问题并且图像大小不会像在screencaptures中那样显示......

那么，关于如何修复它的任何想法？

Answer 1

当您返回页面时，JQM会在内部触发一个名为upateLayout的事件，该事件可能还会调整相对于标头的内容定位。尝试通过以下方式自行触发：

 $([your_page]).trigger("updatLayout");

看看这是否有效。也许你需要在标题或内容而不是页面上调用它。

Answer 2

重构我的代码之后，我再次尝试了所有不同的解决方案，结果证明了最初的解决方案：

$(window).on('load', function () {
  $(this).trigger('resize');
});

帖子中的

：https://stackoverflow.com/a/11110607/3708095 是最终解决了我的问题。

我在</body>标记之后使用该代码调用脚本，在所有html下面（不确定之前是如何调用的），现在正在运行。

很抱歉给您带来不便。