10

jquerymobileの固定ヘッダーに画像があります。ページがGoogleChromeまたはAppleSafariに読み込まれると、ページのサイズを変更するまで、ヘッダーコンテンツがヘッダーの下のコンテンツdivとオーバーラップします。FirefoxとIEは問題なく動作します。

ありがとう！

4

6 に答える 6

20

問題は、jQuery Mobileがページを初期化するときに、ヘッダー画像が読み込まれず、ヘッダーがはるかに小さいため.ui-page、画像が読み込まれると小さすぎる要素にパディングが配置されることだと思います。これを簡単に修正するには、ヘッダーイメージのサイズを手動で設定して、ソースが読み込まれる前でも必要なスペースを占有するようにします。

これを行うこともできますが、私にはかなりハッキーに見えますが、resizeイベントをトリガーして再描画を強制するdocument.readyか、次のようにしwindow.loadます。

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

あなたのページにいる間にこのコードをコンソールに貼り付けたところ、期待どおりにタイトル要素が再配置されました。

于 2012-06-19T22:50:23.607 に答える
3

次のCSSを適用すると役立ちますか？

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

これはオーバーレイポップアップにも適用されるため、セレクターを調整する必要があることに注意してください。

于 2012-06-19T13:57:32.113 に答える
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 に答える
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 に答える
0

上記の解決策はどれも私にはうまくいきませんでした。しかし、私の問題はページナビゲーション後のイベントにあることがわかりました。この間にコンテンツdivが非表示になっている場合、コンテンツ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 に答える