2

アプリケーションの 1 つのページのサイズを調整する際に問題が発生しています。

使ってるうちに

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi"/>

ページの「通常の」サイズを設定するために、特定のページの幅を調整したいのは、より広い画像が表示されるためです。しかし、私がやろうとしているときは、次のように調整します

<div date-role="page" id="organigram" style="min-width:1000px;">

またはCSSを介して：

#organigram > .ui-page {
min-width: 1000px;
}

画像のあるこの特定のページにアクセスするまで、すべてのページの幅を設定します。ページ ヘッダーの [戻る] または [ホーム] ボタンを使用して戻ると、すべてのサイズが通常 (デバイスの幅) に戻り、画像を含むページは新しい最小幅のままになります。しかし、この方法では役に立たない。ページ内の画像の幅を変更しようとしましたが、幅はまったく変更されません。何か案は？追加のコードが必要な場合は、提供します。前もって感謝します！

/編集: JavaScript を使用して回避策を見つけました。ページが開くと、スクリプトはページ全体を上書きし始めます

document.getElementById('organigram').innerHTML = myPageContent;

とにかくこれは解決策ではありません。

4

1 に答える 1

2

jQUery Mobile ページの問題は、1 つのページの寸法を変更するとすべてのページが変更されることです。これは理解できます。すべてのページがビューポートに収まる必要があります。

できることは、そのページがアクティブなときにのみページ幅を変更することです。そのためには、jQuery Mobile ページ イベントを使用する必要があります。

#pageIdは、変更するページの ID です。

$(document).on('pagebeforeshow', '#pageID', function(){       
    $(this).width(1000);
});

$(document).on('pagebeforehide', '#pageID', function(){       
    //Return page width to the correct size
});

jQuery Mobile ページ イベントを使用したことがない場合は、私の他の回答をご覧ください。多くの役立つ情報が見つかります: jQuery Mobile: document ready vs page events

于 2013-05-21T10:26:33.073 に答える