在手機上運行的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應用程序

回答

相關問題