CODEWITHSUNDEEP
androidcssjquery-mobilecordovamobile-devices
Hafiz
Hafiz

Reputation: 4277

fit a phonegap application in both width and height, atleast font to have same increase in size in all devices

I am working on a phonegap application. It is only for portrait view. On Devices more than 4 Inches, my screens seems so small and there is 2/5 empty space under the content(jQueryMobile form controls), to fill empty space I had the option to increase size of fonts and heights e.t.c. but that wasn't good because it will have bigger fields and font sizes on small devices which are 3.2 inches high.

So I am setting font-size after some calculation according to height of device, it seems better. As it fit for device but as font-size increase in both width and height, so fonts and elements were messing up because font-size was bigger with respect to width. This can be solved by reducing the calculated size. But then the problem is that some devices are 5.3 inches high but have same width as 3.2 inches phone.

My requirement is not to exactly fit the screen and no empty space but to fill enough space and look same on most of devices. So if there is some other way to achieve this thing, either by using different unit like percentages or 'em' e.t.c. then those solutions are very welcome. And any effort will be appreciated.

Upvotes: 1

Views: 2191

Answers (1)

Vicky Gonsalves
Vicky Gonsalves

Reputation: 11717

To solve this issue, u will have to take help of css. Make css style of each and every element to percentage. Eg. Lets say below example

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
 <html lang="en">
 <head>
     <title></title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <style>
                *{
                margin:0;
                padding:0;
                }


    html{
        width:100%;
        height:100%;
        }

        body{
        width:100%;
        height:100%;
        }

            .header{
            position:relative;
            background:blue;
            width:100%;
            height:20%;
            }

            .content{
             position:relative;
            background:pink;
            width:100%;
            height:60%;
            }
            .row1{
            width:100%;
            height:100%;
            }
            .footer{
             position:relative;
            background:green;
            width:100%;
            height:20%;
            }
 </style>


</div>

<div  class="content">
 <div  class="row1">
 <img 

src="http://media1.santabanta.com/full1/Emotions/Love/love-130v.jpg" style="width:100%; height:100%" />
     </div>
    </div>

    <div  class="footer">

     </div>
     </body>
 </html>

Upvotes: 0

Related Questions