Support for Android extra large screen resolution

[Claude Coulombe]

Greetings folks,

I've got problem with Android extra large screen resolution (720 x 1280) in order to support new Android phones like the Samsung Galaxy S III.

I've added android:xlargeScreens="true" in the project manifest and I was able to manage the .pgn and splash screen ressources but all the html and css stuff are pretty small and not usable.

I've been with the impression that all those html stuff will scale « automatically » with screen resolution as I used only relative em and % in all my css rules and UIbinder templates.

Did I miss something important about CSS?

Is there any simple workaround?

Do I have to create a separate Android project with new CSS stylesheets?

What are the « main » modifications I must apply to the CSS?

Thanks

[Claude Coulombe]

By the way, I've put this meta tag into the index.html 

<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

Have you got any idea?

Thanks in advance!

[Zhihua (Dennis) Jiang]

Claude, there is a fix for higher resolution screen size, a small change. I will send it out tomorrow.

[Claude Coulombe]

Greetings Zhihua,

I've got some pretty good results putting <meta name="viewport" content="width=device-width"> in the index.html file 

and modifying the master.css file as below :

html, body { 

   height: 100%;  

   overflow: hidden;  

   margin: 0px; 

   padding: 0px; 

   -webkit-text-size-adjust: 100%;  

   -ms-text-size-adjust: 100%; 

}

But I have to test it more extensively... I'm not a CSS expert...

What do you think of this fix?

Claude

[Claude Coulombe]

Oups, I missed something...

In fact, I kept the original viewport meta tag

    <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

But the CSS modifications I've proposed seem to fix the problem.

Claude

[Claude Coulombe]

Finally, after checking the viewport meta tag should be

<meta name="viewport" content="width=device-width">

and the CSS changes do nothing

Sorry for the confusion...

Claude

[Zhihua (Dennis) Jiang]

Claude, see the change to the Page.setPageResolution() method. If you apply the same change to your code base, it should fix the resolution problem for you. 

https://github.com/dennisjzh/GwtMobile-UI/commit/b71eb3df972a659971db5943f4fd9f00d6374a88

[Claude Coulombe]

Greetings Zhihua,

Thanks a lot for your quick answer and you generous help, but in my particular case, the only thing which seems to give some results was to change the viewport meta tag to <meta name="viewport" content="width=device-width"/>. But, doing this, I have to rework all the CSS stylesheets specific to my application.

In fact, I've put your proposed changes in the Page.java code with no visible improvements. Moreover, I've created a new Android app for Ice Cream Sandwich, using android.jar 4.0.3, adding drawable-xhdpi ressources and adding <supports-screens android:xlargeScreens="true" ... />, <uses-sdk android:minSdkVersion="11" />  to the AndroidManifest.xml

I would like your expert opinion about the change to the viewport meta tag that I have undertaken.

Maybe I've missed something?

[Claude Coulombe]

Me again...

In order to illustrate my problem :

with the original viewport meta tag in the index.html file

<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

with a modified viewport meta tag in the index.html file

<meta name="viewport" content="width=device-width"/>

[Claude Coulombe]

Greetings Zhihua,

This is worse than I thought ... 

According to my tests, the suggested modifications to code Page.java hinder the improvement by the use of the new viewport meta tag.

Claude

[Zhihua (Dennis) Jiang]

Claude,

This is interesting. The Page.java change worked for me. To verify, can you try the app below from the market to see if the screen resolution works on your ICS device? The app uses gwt mobile and has applied the page.java change.

 

https://play.google.com/store/apps/details?id=com.TouchOnMobile.FantasyPredictor&hl=en

[Claude Coulombe]

Greetings Zhihua,

 

This is interesting. The Page.java change worked for me. To verify, can you try the app below from the market to see if the screen resolution works on your ICS device? The app uses gwt mobile and has applied the page.java change.

 

https://play.google.com/store/apps/details?id=com.TouchOnMobile.FantasyPredictor&hl=en

No problem!

For the moment, I'm using an emulator but tomorrow I will have access to a real device.

Many tanks for the follow-up

Claude

[Claude Coulombe]

Greetings Zhihua,

This is interesting. The Page.java change worked for me. To verify, can you try the app below from the market to see if the screen resolution works on your ICS device? The app uses gwt mobile and has applied the page.java change.

 

https://play.google.com/store/apps/details?id=com.TouchOnMobile.FantasyPredictor&hl=en

The FantasyPredictor app is running well on a real device.

Using <meta name="viewport" content="width=device-width"/> in the index.html, some pages have a well rendering but other pages show very big images. 

Any idea?

Claude

[Claude Coulombe]

Greetings Zhihua,

As you suggested, I've added the above CSS "WXGA" style rule in the master.css file.

.WXGA {

font-size: 3.2em;

}

Unfortunately, it made no difference to the rendering of my specific application.

So, I'm investigating further...

Thanks again for your support!

Claude

[Claude Coulombe]

Greetings Zhihua,

Finally, all is now working well when tested with a real Galaxy S3 phone.

The fact that the rendering remains unchanged sparked a doubt about my Eclipse Android emulator for the Galaxy S3. The problem was the emulator configuration.

There is no Galaxy S3 emulator bundled with the AVD (Android Virtual Device), so I configured an emulator as close as possible to the behavior of the Galaxy S3.

These are two excellent blog's posts about Emulator Settings for Android:

http://blog.blundell-apps.com/emulator-settings-for-each-android-density/ 

and http://stackoverflow.com/questions/10804619/samsung-galaxy-s3-emulator-settings 

This is my setting :

Target : Google APIs - API Level 15 

Skin: Built-in WXGA720

Hardware Back/Home: yes

Abstracted LCD density: 320

Keyboard lid support: no

Max VM application heap size: 48

Device ram size: 1024

Many thanks again!

Claude

[Zhihua (Dennis) Jiang]

Claude, that's good to know. Congrats.