1

そこで、Jquery Mobile と Phonegap を使用して Web アプリケーションを構築しています。廃止されたいくつかの入力フィールドとドロップダウンメニューを削除するまで、アプリは正常に機能していました。

問題は、ページの最後の入力フィールドをクリックして iOS キーボードをアクティブにすると、フッター バーが固定されなくなり、フッター バーと iOS キーパッドの間に白い隙間ができることです。キーパッドが再び非表示になると、ページ全体が表示されますが、白い隙間がフッターの上にあります。

これは Android プラットフォームでは問題にならないようですので、CSS の問題ではないかと考えています。ヘルプは大歓迎です。これが問題のページコードです...

<div data-role="page"  data-theme="f" id="">
        <div data-role="header" class="ui-state-persist">
            <a href="#" data-icon="arrow-l" data-direction="reverse" data-iconpos="notext"></a>
            <h1>text</h1>
            <a href="#" data-icon="arrow-r" data-iconpos="no text"></a>
        </div>
            <div data-role="content">
                <label for="">Text</label>
                <input type="text" name="text" id="" value="" class="input-field required"/>
                <label for="">Text</label>
                <input type="text" name="" id="" value="" class="input-field required"/>
                <label for="">Text</label>
                <input type="text" name="" id="" value="" class="input-field required"/>
                <label for="">Text</label>
                <input type="" name="" id="" value="" class="input-field required"/>
            </div>
            <div data-role="footer" class="ui-state-persist"  style="min-height:42px;">
                <a href="#" data-icon="arrow-l" data-direction="reverse" data-iconpos="left" style="margin-left: 10px; margin-top: 5px">Done</a>
                <a href="#main_menu" data-icon="home" data-direction="reverse" data-iconpos="notext" style="float: right; margin-right: 10px; margin-top: 5px"></a>
            </div>
4

1 に答える 1

1

次のコードを試してください (jQuery Mobile バージョン 1.2.0 を使用):

<div data-role="page"  data-theme="f" id="quickquote_insured">

    <div data-role="header" class="ui-state-persist">
        <a href="#quickquote_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="notext"></a>
        <h1>Contact Details</h1>
        <a href="#quickquote_driver_profile" data-icon="arrow-r" data-iconpos="notext"></a>
    </div>

    <div data-role="content">
        <label for="quickquote-insured_initials">Initials:</label>
        <input type="text" name="quickquote-insured_initials" id="quickquote-insured_initials" value="" class="input-field required"/>
        <label for="quickquote-insured_surname">Surname:</label>
        <input type="text" name="quickquote-insured_surname" id="quickquote-insured_surname" value="" class="input-field required"/>
        <label for="quickquote-insured_phone_number">Mobile number:</label>
        <input type="text" name="quickquote-insured_phone_number" id="quickquote-insured_phone_number" value="" class="input-field required"/>
        <label for="quickquote-insured_email_address">e-Mail address:</label>
        <input type="email" name="quickquote-insured_email_address" id="quickquote-insured_email_address" value="" class="input-field required"/>

        <br>

    </div>

    <div data-role="footer" class="ui-state-persist"  style="min-height:42px;">
        <a href="#quickquote_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left" style="margin-left: 10px; margin-top: 5px">Done</a>
        <a href="#main_menu" data-icon="home" data-direction="reverse" data-iconpos="notext" style="float: right; margin-right: 10px; margin-top: 5px"></a>
    </div>

</div>

シンプルに見えるかもしれませんが<br>、メール入力フィールドのすぐ下に追加しただけです。

問題は、フッターが「静的」であるため、ページを「埋める」必要があることだと思います。

たとえば、ページにフィールドがほとんどなく、ページに「入力」しない場合、次の結果が得られます。

1

お役に立てれば。

于 2012-10-16T22:42:00.110 に答える