HTML5 + CSS3 + jQueryMobile 1.2.0 を使用するモバイル Web アプリ (後で phonegap を使用してネイティブ アプリに変換する予定) に取り組んでいます。css3 と html5 は苦手ですが、モバイル サイトを学習して開発しようとしています。背景画像をテキストに追加する必要がある画面が表示されるまで、すべてがうまくいきます。320*480 ~ 1280*798 の画面をターゲットにしています。だから、私のサイトはどこでも見栄えがよく、同じです。だから、私のhtmlとcssのフィドルを追加し、スクリーンショットを追加しています。
私の要件:
- 左右の 2 つの画像は、画面サイズ (320 - 1280) に応じて柔軟にする必要があります。
- 中央のテキストは中央揃え (水平 + 垂直) にする必要があります。
- 右側の画像にもテキストがあり、これも中央揃え (水平 + 垂直) にする必要があります。
私のコードのフィドルHTML + CSS コード
以下のようにfirefox(1280 * 768)になります(ほぼ希望どおり)。
firefox と android エミュレーターのスクリーンショット
しかし、Androidエミュレーター(320 * 480)で同じように実行すると、正しく配置されません
そこで、背景画像・ダイレクト画像と合わせてコンテンツを揃える方法を教えてください。最終的に私の画面はFirefoxのように見えるはずです。
前もって感謝します。