How to fit a GWT app based on device resolution

I have this GWT app which I need to "fit" within the resolution of a mobile device.

It should not do side scrolling (the width should开发者_开发问答 be the width of the phone screen) but vertical scrolling is required as the app will show list or result items.

The main widget is a GWT VerticalPanel that house some composite widgets.

Any ideas?

You have to set the viewport and/or scale properties for Mobile Browsers of 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" />

Read more about all viewport options here: Targeting Screens from Web Apps

And instead of using ResizeHandler, you could also use LayoutPanels which should be added to RootLayoutPanel instead of RootPanel. LayoutPanel resize automatically when the Window is resized.

Resolution independent layout design is really a pain in the ass especially with GWT like web-apps.
Static web-pages usually rely on fixed layouts (960 grids) etc. However they are not really appropriate for GWT like web-apps.

You could try to use liquid/fluid layouts with min-width/max-widths and percentage values.
See below for more information:
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/

However sometimes especially with mobile devices it makes sense to have a different user interfaces for desktop and mobile.
For example with a tablet it might make sense to have a navigation panel on the left side and a content panel on the right side. However on mobile phones it might make sense to just have a navigation panel and on clicking an item switching to the content panel.

There is a google io talk about the whole mobile/desktop aspect:
Google IO Talk
Code Sample