Question

我有这个GWT应用程序，我需要“适应”移动设备的分辨率。

它不应该进行侧滚动（宽度应该是手机屏幕的宽度），但是需要垂直滚动，因为应用程序将显示列表或结果项。

主要小部件是一个GWT VerticalPanel，它包含一些复合小部件。

有什么想法吗？

Answer 1

您必须为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，您也可以使用应添加到LayoutPanels而不是RootPanel的RootLayoutPanel。调整窗口大小时，LayoutPanel会自动调整大小。

Answer 2

分辨率独立的布局设计真的很痛苦，尤其是像网络应用程序这样的GWT 静态网页通常依赖于固定布局（960网格）等。但它们并不适合像网络应用程序这样的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

如何根据设备分辨率调整GWT应用程序

2 个答案: