i've tried to build a main view with PhoneGap. The main view has some buttons that contain an image and text. Each button has the following statements:
<div ng-repeat="module in Modules" ng-click="setPage(module)" class="button" style="background-color: #ffffff;
height: 11%;
width: 60%;
margin-bottom: 3px;
margin-top: 1.5%;
opacity: 0.8;
padding-right: 0px;
padding-left: 0px;
text-align: center;
font-size: 1em;">
<img class="imgMain" ng-src={{module.IconUrl}}>
<span class="spanMain">{{module.Name}}</span>
</div>
css:
.spanMain{
font-size: 1em;
position: absolute;
bottom: 0;
right: 0;left: 0;"}
.imgMain{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 25%;
margin: auto;
max-width: 50%;
max-height: 50%;}
on an iPhone it looks great, but in galaxy the module name(i.e. the text) in the <#span tag#> displays the text in a smaller font size. if i change the font size to a bigger size, on the iPhone it's displayed way to big, really out of proportion, yet on galaxy it's ok. how can i resolve that?
thanks alot,