Search code examples
androidcordovascaleautoresize

How can I configure my Phonegap App to scale its viewport accordingly with the phone's resolution?

I'm developing an Android App using Phonegap. It's a "question and answer" game and it has a complex layout comparing to the majority of mobile apps.

How do I configure to automatic rescale in different resolutions?

Until now I'm doing the same process I do to create simple web pages: slicing images and placing into HTML with CSS. But I noticed the planned resolution to work on is about 540x960, bigger than a lot of phones I'm used to.

Solution

  • I archived that simply using css transform scale in body. Something like this:

    body {
    -webkit-transform: scale(0.5, 0.5);
    -moz-transform: scale(0.5, 0.5);
    -ms-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
}