10

我的 jquery 移动固定标题中有一张图片。当页面在 Google Chrome 或 Apple Safari 中加载时，标题内容与标题下方的内容 div 重叠，直到我调整页面大小。Firefox 和 IE 工作得很好。

谢谢！

4

6 回答 6

20

I think the problem is that when jQuery Mobile initializes the page, the header image is not loaded and the header is much smaller so jQuery Mobile puts a padding on the .ui-page element that is too small once the image loads. A simple fix for this is to manually set the size of the header image so that it takes-up it's required space even before its source loads.

You could also do this, although it seems pretty hacky to me, force a redraw by triggering the resize event on document.ready or maybe window.load:

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

I pasted this code into the console while on your page and it re-positioned the title element as expected.

于 2012-06-19T22:50:23.607 回答
3

应用以下 CSS 有帮助吗？

.ui-page {
    padding-top: 91px !important;
}

请注意，您必须优化选择器，因为这也适用于覆盖弹出窗口。

于 2012-06-19T13:57:32.113 回答
1

我使用了Jasper和Carlos487提供的相当好的解决方案，发现这是最新且最可靠的方法（jQM 1.4.x）：

  1. 如果这是由于没有指定尺寸的图像需要一些时间来加载并因此可能导致标题放大，那么指定已知尺寸（最好通过 CSS）应该这样做。否则应该有一种方法来确定它是否已经完成加载，从而应用下面解决方案 3 的想法。

  2. 如果这是由于某些（可能）未知的标头调整大小事件（例如，通过稍后加载的某些图像或某些其他内容缩小标头并因此使其垂直变大），那么这应该与一个合理的足够大的超时值一起使用：

    $( ':mobile-pagecontainer' ).on( 'pagecontainershow', function(e) {
  // maybe value > 100 needed for your scenario / page load speed
  setTimeout( function() { $(window).trigger('resize'); }, 100 /*ms*/ );
}

  3. 如果您知道是什么原因造成 的（在我的情况下，我通过一些（否则隐藏/覆盖的）左对齐导航面板在大屏幕上右移页面内容），那么以下可能会更好，与蜜蜂无关页面需要在某些设备或场景上加载的实际时间（可能比您上面预定义的超时时间长）：

    // if its due to some animation like in my case
// otherwise try to find a similar way to determine when the resizing event has 
// completed!
$('#someAnimated').animate( 'complete', function() { $(window).trigger('resize'); });

（我不确定Jasper使用的解决方案$(window).on( 'load', ...在所有 jQM 页面加载场景（使用 AJAX 页面导航）中是否正确。这就是为什么我在我的示例中更喜欢Carlos487的方法。）

于 2015-01-07T21:06:11.180 回答
1

我遇到了很多麻烦。这一直有效，直到我想添加一个链接：

<div data-role="header">
  <img border="0" src="logo.png" style="float:left;display:inline"/> <h1></h1>
</div>

注意空的 h1 标签。

我最终根本没有使用 data-role="header" ，我只是无法让它与链接一起使用。我改用了 ui-bar 类。像这样：

<div class="ui-bar ui-bar-a">
    <a href="/" data-role="none">
        <img border="0" src="images/logo.png" style="float: left; display:inline">
    </a>
</div>
于 2012-06-20T00:22:47.450 回答
1

对我有用的基于@Jasper 答案的解决方案是：

$(document).on('pageshow', "div[data-role='page']", function () {
    $(window).trigger('resize');
});

它具有适用于所有jquery 移动页面的改进

于 2013-12-12T21:28:21.497 回答
0

上述解决方案都不适合我。但我发现我的问题在于页面导航后的事件。如果内容 div 在此期间被隐藏，它不会被定位在标题 div 下，而是留在原来的位置：

$(document).on("pageshow", "div[data-role='page']", function()
{
   $("#pageContentDiv").hide();
   setTimeout(function()
   {
      $("#pageContentDiv").show();
   }, 0);
});

编辑： 找到更好的解决方案；将标题 div 高度和页面 div 顶部填充设置为相同的值：

<div data-role="page" style="padding-top: 60px">
<div data-role="header" data-position="fixed" style="height: 60px">

希望这可以帮助。

于 2015-06-30T12:21:30.370 回答