CODEWITHSUNDEEP
gwt
MayoMan
MayoMan

Reputation: 4917

Keeping GWT widget size propotional to screen size

Most of my views will have 5 - 10 widgets and I am trying to figure out how to make the buttons, dropdowns look their best.
I have tried setting their dimensions as a % of the current screen size but this is not an ideal solution for very large screen or very small ones. Mobile users will be the primary end users. What is the best way to effect this So a mobile user will actuall be able to see a decent sized button a small screen while a PC user will not end up looking at some huge buttons if they are full screen.

Upvotes: 1

Views: 658

Answers (2)

Manolo Carrasco Moñino
Manolo Carrasco Moñino

Reputation: 9741

In modern browsers, apart from the viewport as is mentioned in the other response and which applies to the entire document, you could use css scale transformations.

See this pure html/css example

What I do in GWT is whether, I have different .ui.xml or css bundle for desktop and mobile permutations with different scale values, or I change it by code (computing scale factor in base of window size, browser type, etc).

In the second case you can use gwt element methods: 

 panel.getElement().getStyle().setProperty("WebkitTransform", "scale(0.65, 0.65)");
 panel.getElement().getStyle().setProperty("MozTransform", "scale(0.65, 0.65)");

or I'd rather use the gwtquery syntax:

$(panel).css($$("-webkit-transform: scale(0.65, 0.65); -moz-transform: scale(0.65, 0.65);"));

Upvotes: 0

Suresh Atta
Suresh Atta

Reputation: 122026

You can use ViewPort Meta tag to maintain proper widths and heights for your web applications on mobile devices too.. with out changing all the layouts .

The viewport meta tag to control layout on mobile browsers.

See the below question also ,which I already answered to set the viewport .

Achieving min-width with viewport meta tag

Upvotes: 1

Related Questions