Best approach to scale up layout for retina display

[jogo]

Hi,

I am finalizing one app, which should work both on Android and on iOS, including iOS devices with retina display. Everything works fine except font-size on retina devices.

The problem is, that when I test the app in iOS simulator, UI looks proportionally ok on non-retina and retina virtual device and the font is 2x larger on retina device. But when I deploy the app to a real retina device, font is only 1x large (as on non-retina) and it is very small. UI is completely broken (small buttons, smaller header, text,etc.). I understand it is because of higher pixel density on retina display. So basically the UI layout is different in iOS simulator than on real retina device (or maybe not as explained futher).

I was wondering, what is causing this - whether it is a bug in iOS simulator or I did something wrong.

Then I did some testing. I uploaded the web app on a web server and I tried to open the app in mobile Safari browser in iOS simulator first on non-retina and then on retina virtual device. And it really showed different font-sizes like on the real device. So the same app deployed on iOS simulator looks different (different font-size) as the same app loaded from a URL in Mobile Safari on the same virtual device in iOS simulator...

For example:

When i set iOS Simulator to iPhone retina iOS 5.0 => font is 2x larger in the app (proportionally ok) in iOS simulator, but only 1x large when the app is loaded in Mobile Safari in iOS simulator

In the standard master.css there is set body font-size to 62.5% (very clever Denniz; more here: http://clagnut.com/blog/348/). And then based on the screen size is added additional css class (VWGA, HVGA, etc...) which increases font-size (I removed setPageResolution method in Page class). This doesn't work for me, because each widget (e.g. Button on MainPage, Button in HeaderPanel, etc...) has it's own CSS class definition and set font size in em units. E.g. MainPageButton size set to 2em. HeaderPanelBackButton size set to 1.2em. So increasing default size won't affect other css classes.

Furthermore, my goal is to have single CSS file (all sizes are in ems or %) for all possible display sizes - for iPhone, iPhone retina, iPad, Android devices...

So I started experimenting with setting font-size to body element with css media queries and I tried to detect the device and set body font-size to 125% for retina displays => 1em = 20px which should scale up font size and keep proportions of UI.

Here is a CSS snippet for iPhone 5 device:

/* standard font-size */

body {

  font-size: 62.5%; /* 1em = 10px */

}

/********************* Page Zoom ****************/

/* iPhone 5G retina 640x1136 */

@media only screen and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {

  body {

    font-size: 125%; /* 1em = 20px */

  }

    

}

This did the trick in Mobile Safari in iOS simulator. When I simulated various devices media queries were triggered and font-size changed accordingly. The UI was correct in the browser.

But on the contrary, when I build a new version of the app (with the media query above) and deployed it to iOS simulator, font size was for retina displays 4x larger, not only 2 times. I thought that it was a bug in iOS simulator.

But at the end, I tested it on iPhone with retina display (font-size set to 125%) and I was expecting, that the size would be correct (2x larger => 20px). But to my surprise, it was 4x larger on the real device as on the iOS simulator. WTF???

I cannot reproduce it now, as I am travelling. Maybe I did some mistake during the process and messed up the CSS file - because firstly iOS simulator showed it OK, but on real device font was small. At the end simulator showed font 4x larger as on the real device...

Do you have any idea, what is causing this? Why is font size different in Mobile Safari and iOS Simulator? Can you double check it?

And most importantly, how to define and implement an uniform approach to lay out app so the layout can adjust to any device pixel ratio?

Does iOS scales content up automatically for retina display and I just did some mistake in CSS / during testing? Or we have to scale it up for displays with pixel ratio higher than one using media queries / javascript? 

Here is an excellent article on this topic:

http://alistapart.com/article/a-pixel-ideantity-crisis

[Zhihua (Dennis) Jiang]

jogo, 

The setPageResolution method should work for you. Knowing that "em" is a relative measure (relative to its parent), widgets will still scale accordingly even when they have their own font size value. Below is my latest setPageResolution implementation which uses client width to determine screen resolution (which is more accurate than device pixel ratio in my opinion). For retina display it should pick up WXGA = 3.2 * 10px. You can adjust its value to your liking. 

private static void setPageResolution() {

int clientWidth = Window.getClientWidth();

if (Utils.isDesktop()) {

Document.get().getDocumentElement().setClassName("HVGA");

}

else if (clientWidth < 320) {

Document.get().getDocumentElement().setClassName("QVGA");

}

else if (clientWidth < 480) {

Document.get().getDocumentElement().setClassName("HVGA");

}

else if (clientWidth < 560) {

Document.get().getDocumentElement().setClassName("WVGA");

}

else {

Document.get().getDocumentElement().setClassName("WXGA");

}

}

/********************* Page Zoom ****************/

.WXGA {

font-size: 3.2em;

}

.WVGA {

font-size: 2.4em;

}

.HVGA {

font-size: 1.6em;

}

.QVGA {

font-size: 1em;

}

--
You received this message because you are subscribed to the Google Groups "GWT Mobile" group.
To unsubscribe from this group and stop receiving emails from it, send an email to gwtmobile+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Stanislav Tvarůžek]

Hi Denniz,

thanks for response. But I have many custom widgets where each widget has its own css class definition with font-size attribute defined in em units.

Increasing the "global" font-size won't affect other class definitions. Therefore I was trying to change the body font-size in %. But apparently it doesn't work or I did something wrong. I didn't get any consistent results. I need more time to play with it. This would be the best solution.

Other solution might be to use % on body, then set on body the default font size as you implemented in the setPageResolution method and then for all nested html elements / widgets use % in css class definitions instead of em units. This should work, but I would personally stick rather with em units.

I'll test it further on Monday.

[jogo]

You are right no media queries are needed which would modify the % of body element based on screen size.

Basically what I did not realize (my stupidity) was that the setPageResolution adds extra classes which defines the default font size to the root element (html) and all children inherits it :o)

This is much better and simpler approach, than changing % of the body element. Anyway now it works perfectly on iPhone and iPad retina display and the app I am finishing is almost done.

To unsubscribe from this group and stop receiving emails from it, send an email to gwtmobile+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
You received this message because you are subscribed to the Google Groups "GWT Mobile" group.

To unsubscribe from this group and stop receiving emails from it, send an email to gwtmobile+unsubscribe@googlegroups.com.