如何根据设备分辨率适合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，你也可以使用LayoutPanels应该添加到RootLayoutPanel而不是RootPanel。调整窗口大小时，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的网络应用程序。
静态网页通常依赖于固定的布局（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

来源

2011-08-22 12:43:01

如何根据设备分辨率适合GWT应用程序

回答

相关问题