4

Android では、画像/レイアウトの幅と高さを設定するための layout_weight と layout_height があります。そのため、画面サイズが異なる場合、指定した画面幅と画面高さに自動的に調整されます。

phonegap/jquery mobile に似たものはありますか?

ヘッダーとフッター、そしてその間に画像が必要です。cssにヘッダーを追加してみました。しかし、画像はヘッダーで繰り返され、画面全体もスクロール可能ですが、画面に固定画像が必要で、デバイスの画面サイズに自動的に調整する画像を作成したいと考えています。phonegap と jquery mobile は初めてです。

ヘッダーとフッターの間に画像を固定し、異なる画面サイズに自動的に調整するにはどうすればよいですか?

htmlページはこちら

<div data-role="page" id="timer">
     <div data-role="header"  data-position="fixed" data-tap-toggle="false" class="timerheader">
        <h1></h1>
     </div>
     <div data-role="content">
        <p><centre><img src="Image/timer.png" alt="" /></centre></p> 
     </div>
     <div data-role="footer" data-position="fixed" data-tap-toggle="false"   >
        <h3><a href="#" data-role="button" data-inline="true" ><img src="Image/Next.png"/></a></h3>
     </div>
</div>

ありがとう：）

4

2 に答える 2

5

これは、jQuery Mobile では少し注意が必要です。ページの幅は常に同じですが、ページの高さはページ イベントごとに異なります。jQuery Mobile ページ イベントについてどれだけ知っているかわかりませんが、簡単に言うと、これらのイベントは、ページの読み込み中およびページの遷移中に発生します (詳しく知りたい場合は、私の別の記事: jQueryをご覧ください)。モバイル: ドキュメント準備完了とページ イベント)。

それでは、質問に戻りましょう。jQM ページのコンテンツは、すでに十分なコンテンツが満たされていない限り、完全なページ コンテンツを取得することはありません。幅 100%、高さ 100% の純粋な CSS アプローチを採用することはできません。

この問題を解決するには、コンテンツ div が使用可能なページ コンテンツの高さ全体を使用するように強制する必要があります。これは、次の関数で実行できます。

function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    } 
    return content_height;
}

この関数を使用して、pageshow ページ イベント中にコンテンツの高さを設定します。また、画像の幅は 100%、高さは 100% になります。

次に、画像の CSS を修正して、コンテンツの高さが適切に収まるようにする必要があります。

html,body{height:100%;}

img {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow-y: hidden !important;
}

.ui-content {
    padding: 0 !important;
}

.ui-content img {  
    max-height: 100%;/* Part 1: Set a maxium relative to the parent */
    width: auto\9;
    /* IE7-8 need help adjusting responsive images */
    max-width: auto; 
    /* Part 2: Scale the height according to the width, otherwise you get stretching */
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}

最後に、実際の例を示します: http://jsfiddle.net/Gajotres/yndsW/

編集 ：

私の別のアプローチを見てください。img タグを使用する代わりに、背景画像を使用し、css でセンタリングを処理することにしました。Javascript は、画像を動的に変更する場合にのみ必要です。

ページの高さを修正するには、JavaScript が必要です。

HTML : 

<div data-role="page" id="Windage">
    <div data-theme="a" data-role="header" data-position="fixed">
        <h3>Header</h3>
    </div>


    <div data-role="content">

    </div>

    <div data-theme="a" data-role="footer" data-position="fixed">
        <h3>
            <a href="#" data-role="button" data-inline="true" data-transition="slide">NEXT</a>
        </h3>
    </div>
</div>

CSS : 

html,body{
    height:100%;
}

.ui-content {
    background-repeat:no-repeat;
    background-size:contain;  
    background-position: center center;
}

Javascript : 

$(document).on('pageshow', '#Windage', function(){       
    $('[data-role="content"]').height(getRealContentHeight());
    $('.ui-content').css('background-image','url(Image/timer.png)');    
});

function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    } 
    return content_height;
}
于 2013-05-06T10:16:06.903 に答える
0

私は解決策の1つを知っています。完璧ではありませんが、とてもうまく機能します。解像度ごとに異なる css ファイルを指定し、メディアクエリを使用できます。Mediaqueries は、指定できるいくつかのルール (画面の解像度など) に応じて CSS コードを置き換えます。PhoneGap と jQM で非常にうまく機能します。ここで確認し、公式の w3 ドキュメントを読んでください。

お役に立てば幸いです。

于 2013-05-06T08:51:44.453 に答える