How to configure Phonegap application to scale its viewport with phone resolution?

I am developing an Android application using Phonegap. This is a question and answer game, and it has a complex layout compared to most mobile applications.

How to configure automatic rescaling in different resolutions?

So far I am doing the same process that I am doing to create simple web pages: cutting images and placing in HTML with CSS. But I noticed that the planned resolution for work is about 540x960, more than many phones that I'm used to.

+4
source share
3 answers

I archived this simply using the CSS transform scale in the body. Something like that:

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); } 
+1
source

I'm not sure, but I think in my case this line in index.html does this:

 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 

Hope this helps :).

As for the images you work with, with different resolutions and media requests, I think!

+1
source

This may be relevant for the answer.

How to make html and css based on device width using PhoneGap

+1
source

Source: https://habr.com/ru/post/1413224/


All Articles