0

クライアント向けのテスト モバイル Web サイトを構築しています: http://preview.stafforce.co.uk/mobile/

ご覧のとおり、正しいビューポート サイズを使用してモバイル デバイスまたはデスクトップに Web サイトをロードすると、3 つのオプションを含む赤いボックスが表示されます。赤いボックスは、splash のクラスによって赤色に指定されたページ自体です。(私はもともとこれを、位置固定を使用してページの上に置かれた別の DIV として持っていましたが、配置に関していくつかの問題がありました)。

デスクトップではこれは正常に動作しますが、モバイル デバイス (たとえば Safari を使用している iPhone) では、ツールバーが消えたり、スクロール/向きを変更したりすると、黒いバーが表示されます。画面のサイズ (jq mobile は、これを実現するためにフレームワークを使用して行われる min-height を使用します)。

これを修正する方法についてのアイデアはありますか? または同様の問題がありましたか？また、トランジションを行っているときに、この最小高さが正しくないことが原因である可能性が高い場所で途切れているように見えることに気付きました。

例：

ここに画像の説明を入力

編集: ボディを黒に変更した理由は、フリップ トランジションを実行すると、これが背後に表示され、iPhone などの携帯電話でトランジションを実行するときに黒が背景の正しい色になるためです。

4

1 に答える 1

0

Jquery mobileの拡張された「listview」を使用し、data-role='content'を使用してコンテンツをDIVに保持する必要があります。Jquerymobileはコンテンツをフルスクリーンにします。リストビューなどを手動でスタイル設定しないでください。

デモは次のとおりです：http：//jsfiddle.net/nachiket/YSp3x/

アイコンとロゴは設定していませんが、わかります。可能であれば、ベーススタイリングにJquery mobile Theme Rollerを使用し、その上でカスタマイズを行います。

編集： data-role="page"を持つdivに色を設定できます。

好き：

.myPage {
    background-color:#ff0000; 
    background-image:none;
}​

そしてHTMLで

<div data-role="page" class="myPage">

私はすでにjsfiddleリンクを更新しました。

于 2012-07-05T10:58:52.037 に答える