我的jquery移动固定标头中有一个图像。当页面在Google Chrome或Apple Safari中加载时,标题内容会重叠标题下方的内容div,直到我调整页面大小。 Firefox和IE工作正常。
谢谢!
答案 0 :(得分:20)
我认为问题在于,当jQuery Mobile初始化页面时,标题图像未加载且标题更小,因此jQuery Mobile在.ui-page
元素上添加一个填充,一旦图像加载太小。一个简单的解决方法是手动设置标题图像的大小,以便它甚至在源加载之前占用它所需的空间。
你也可以这样做,虽然对我来说看起来很不好,但可以通过触发resize
或document.ready
上的window.load
事件来强制重绘:
$(window).on('load', function () {
$(this).trigger('resize');
});
我在页面上将此代码粘贴到控制台中,并按预期重新定位了title元素。
答案 1 :(得分:3)
是否应用以下CSS帮助?
.ui-page {
padding-top: 91px !important;
}
请注意,您必须优化选择器,因为这将适用于叠加弹出窗口。
答案 2 :(得分: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>
答案 3 :(得分:1)
基于@Jasper答案的解决方案对我有用:
$(document).on('pageshow', "div[data-role='page']", function () {
$(window).trigger('resize');
});
它的改进适用于所有 jquery移动网页
答案 4 :(得分:1)
我使用 Jasper 和 Carlos487 的相当不错的解决方案,发现这是最新,最可靠的方法( jQM 1.4.x):
如果由于没有指定尺寸的图片而 需要一些时间加载,因此可能导致标题放大, 指定已知尺寸(理想情况下通过CSS)应该。否则应该有一种方法来确定它是否已经完成加载,从而应用下面的解决方案3的想法。
如果,这是由于某些(可能)未知的标头调整大小事件(例如,通过稍后加载的某些图片或其他一些缩小内容的内容)标题,从而使其垂直更大),然后这应该使用合理的足够大的超时值:
$( ':mobile-pagecontainer' ).on( 'pagecontainershow', function(e) {
// maybe value > 100 needed for your scenario / page load speed
setTimeout( function() { $(window).trigger('resize'); }, 100 /*ms*/ );
}
如果您知道导致此内容的原因 (在我的情况下,我正确地通过一些(否则隐藏/重叠)左对齐在大屏幕上移动页面内容导航面板),那么以下可能会更好,不依赖于页面需要加载的实际时间某些设备或场景(可能比上面的预定义超时更长) :
// 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'); });
(我不确定使用$(window).on( 'load', ...
的 Jasper 解决方案在所有jQM页面加载方案(使用AJAX页面导航)中是否正确。这就是我更喜欢的原因在我的例子中, Carlos487 的方法。)
答案 5 :(得分: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">
希望这有帮助。