1

GWTで生成されたJavaスクリプトファイルをAndroidで実行し、モバイル画面のサイズに関係なくUIを同じように見せようとしています。私のビューのほとんどには、5〜6個のウィジェット、ボタン、テキストボックスがあります。私は今のところそれらをFlexTableに入れていますが、ウィジェットをレイアウトするためのより良い方法があるのでしょうか？ただし、私の主な質問は、CSSを使用してウィジェットをレイアウトし、ルックアンドフィールがすべての画面サイズで同じになるようにする方法についてです。これはCSSを使用して行うことができますか？もしそうなら、ウィジェットの配置に焦点を当てたCSSの例はありますか？

4

2 に答える 2

2

さまざまな画面サイズのGWTの場合（および横向き、縦向きの回転を処理するため）、メディアクエリを使用します。このようにして、画面サイズごとにcssルールを定義できます。

たとえば、以下では、myContentPanelを450より大きくする必要はありませんが、iPhone/Androidのポートレートビューには大きすぎます。

@media all and (max-width: 10024px) {
    /*styles for narrow desktop browsers and iPad landscape */
       .myContentPanel{
         width: 450;
    }    
}


@media all and (max-width: 320px) {
   /*styles for iPhone/Android portrait*/
      .myContentPanel {
         width: 320;
    }

}

これは、より完全なcssの例ですhttp://snipplr.com/view/67341/

ここにjQueryを使用した素晴らしいチュートリアルがありますhttp://css-tricks.com/resolution-specific-stylesheets/

詳細については、http： //css-tricks.com/css-media-queries/をご覧 ください。

于 2013-03-10T02:39:42.977 に答える
0

ViewPort Metaタグを使用 して、デバイスwidths and heights上のWebアプリケーションを 適切に維持することもできます。すべてを変更する必要はありません。mobilelayouts

The viewport meta tag to control layout on mobile browsers.

ビューポートを設定するためにすでに回答した以下の質問も参照してください。

ビューポートメタタグで最小幅を実現

また、user1258245が言ったように@mediaタグも見てください

于 2013-03-10T09:44:12.843 に答える