在手机上运行的GWT应用程序

我将在Android上运行我的GWT生成的Java脚本文件，我试图让我的UI看起来不管手机屏幕的大小是否相同。我的大部分视图主要有5到6个小部件，按钮，文本框。现在我已经将它们放在FlexTable中，但是也许有更好的方法来布置小部件？然而，我的主要问题是如何使用CSS来布局我的小部件，因此所有屏幕尺寸的外观和感觉都是相同的。这可能使用CSS吗？如果有的话，任何人都会有关于小部件定位的CSS示例？在手机上运行的GWT应用程序

来源

2013-03-09 MayoMan

不知道它是否适用于GWT，但你需要一个负责任的UI来完成，像引导框架。 – 2013-03-09 23:30:54

对于各种屏幕尺寸（以及处理风景，肖像旋转）的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-10 02:39:42 user1258245

您也可以使用ViewPort Meta tag来为mobile设备上的网络应用程序维护正确的widths and heights ..并且不更改所有layouts。

The viewport meta tag to control layout on mobile browsers.

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

Achieving min-width with viewport meta tag

，也有看看@media标签作为user1258245说

来源

2013-03-10 09:44:12

在手机上运行的GWT应用程序

回答

相关问题