1

我将在 android 上运行我的 GWT 生成的 Java 脚本文件，并且无论移动屏幕的大小如何，我都试图让我的 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 应用程序的正确性。无需mobile更改所有layouts.

The viewport meta tag to control layout on mobile browsers.

另请参阅下面的问题，我已经回答了设置视口。

使用视口元标记实现最小宽度

并查看@media标签，如user1258245所说

于 2013-03-10T09:44:12.843 回答