デバイスの解像度に基づいてGWTアプリを適合させる方法

私はモバイルデバイスの解像度内に「フィット」する必要があるこのGWTアプリを持っています。デバイスの解像度に基づいてGWTアプリを適合させる方法

サイドスクロール（幅は電話画面の幅である必要があります）ではなく、アプリケーションがリスト項目または結果項目を表示するため、垂直スクロールが必要です。

メインウィジェットは、いくつかの複合ウィジェットを格納するGWT VerticalPanelです。

アイデア？

2011-08-12 xybrek

Android/iPhoneのモバイルブラウザのビューポートおよび/またはスケールプロパティを設定する必要があります。

<!-- 
    constraint viewport to device width, 
    set initial zoom level to 100%, 
    disable user zoom 
--> 
<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=no" />

ここでは、すべてのビューポートのオプションについて詳しく読む：Targeting Screens from Web Apps

、代わりにResizeHandlerを使用するのではなく、あなたもRootLayoutPanel代わりのRootPanelに追加すべきLayoutPanelsを使用することができます。 LayoutPanelは、ウィンドウのサイズが変更されると自動的にサイズ変更されます。

出典

2011-08-12 17:17:54 ocaner

おかげで、何とかそれは、しかし、働いていましたそれは、このメタタグからあなたができなかったスクロールアップ/ダウンをこれで行うための方法を上下にスクロールする方法が必要ですか？ – xybrek

あなたのリストを[ScrollPanel]（http://google-web-toolkit.googlecode.com/svn/javadoc/latest/index.html?com/google/gwt/user/client/ui/ScrollPanel）にラップすると思います。 html）が動作するはずです！ – ocaner

解像度に依存しないレイアウトデザインは、特にGWTのようなウェブアプリケーションのお尻に本当に痛みです。
通常、静的Webページは固定レイアウト（960グリッド）などに依存しますが、WebアプリケーションのようなGWTにはあまり適していません。

最小幅/最大幅とパーセント値で液体/流体レイアウトを使用できます。
は、詳細については下記を参照してください：
http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
http://www.maxdesign.com.au/articles/liquid/

特にモバイルデバイスとしかし、時にはそれは、デスクトップとモバイルのためのさまざまなユーザーインターフェースを持っていることは理にかなっています。
たとえば、タブレットでは、左側にナビゲーションパネル、右側にコンテンツパネルを持つことが理にかなっています。しかし、携帯電話では、ナビゲーションパネルを持っているだけでなく、コンテンツパネルに切り替える項目をクリックすると意味があります。全体のモバイル/デスクトップ側面について話IOグーグルあり

：私のウェブは、アイテムの数が可変でリストコントロールを生成するので、この情報のため
Google IO Talkが
Code Sample

出典

2011-08-22 12:43:01

デバイスの解像度に基づいてGWTアプリを適合させる方法

答えて

関連する問題