5

スクロール中に表示されるギャップ (画面上) を削除する方法はありますか? ヘッダーの位置は固定されており、ギャップは Android でのみ表示されます (Android 4.0.4 でテスト済み)。

ギャップ

ヘッダーを担当するコードの一部:

HTML:

<div data-role="page" id="settings">
    <div class="holo-action-bar">
        <h1><span>Settings</span></h1>
    </div>
    <div class="content content-inner"></div>
</div>

CSS:

.holo-action-bar {
  background-color: #333;
  color: #fff;
  display: block;
  position: fixed;
  top: 0; right: 0; left: 0;
  width: 100%;
  z-index: 1000;
}

また、 jquery mobile docsで例を見ることができます

アップデート：

問題は iOS では発生しません (iOS 5 以降でテスト済み)

4

4 に答える 4

1

私は解決策を見つけました：

これは phonegap の CSS の問題です。

body {
   << height : 100%; don't use it >>
   width: 100%;
   margin:0;
   padding:0;
   top: -1px;
}

ハードウェアアクセラレーション: true

于 2014-03-17T05:49:39.157 に答える
0

Cordova 3.0.0 で Intel App Framework 2 を使用している場合、Android 4 パッドの固定ヘッダーの上に 1 ピクセルのギャップがあります。ターゲットの Android バージョンを 4.3 に設定します。

以前のプロジェクトで対象の Android バージョンを 2.3.3 に設定した場合、問題はありませんでした。

最後に、AndroidManifest.xml で hardwareAccelerated="false" (2 か所) を設定すると、1 ピクセルのギャップがなくなることがわかりました。

于 2013-10-22T07:29:05.913 に答える
0

同じ問題があり、この行を activity.java に追加したときに誤って解決しました。

mWebView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

タグのandroid:hardwareAccelerated="true"下のマニフェスト内。<application>これは、ハードウェア レンダラーを優先してソフトウェア レンダラーを無効にしようとしますが、私の 4.0.1 デバイスでは機能しました。

固定ヘッダーとフッターで webview を使用している場合は、ヘッダー/フッター上の点滅するアニメーションが消えるように、次のものも追加することをお勧めします。

mWebView.setOverScrollMode(View.OVER_SCROLL_NEVER);
于 2013-04-29T00:08:53.460 に答える
0

ただし、 data-position="fixed" を削除してください

クラスを作る

<div id="header"><h1>Fixed header!</h1></div>

CSS:

#header{
 position:fixed;
 top:0;
}

編集*

内部オブジェクトのマージンを確認しようとしましたか? そのapタグまたはh1などの場合、標準のマージンがあります

あなたが与えたリンクをチェックアウトすると、私はjqueryモバイルが好きではありません。それはtbhを助けるよりも多くの問題を引き起こします..しかし、とにかく、1pxに境界線があるようです.

于 2013-02-01T11:35:34.723 に答える