0

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,

ben ezra
  • 533
  • 1
  • 3
  • 14
  • Are you using a custom font? Try using a font that is optimized for use on mobile. Fonts tend to render completely different on different platforms. – timo Jan 14 '14 at 13:48
  • i tried to use with values like: medium, large, 1em, precents what you recommend? – ben ezra Jan 14 '14 at 13:51
  • I was wondering what font-family you are using. Like "Arial" or "Helvetica"? You could also try using px instead of em. – timo Jan 14 '14 at 13:59

1 Answers1

0

Dont know if this solutions works, but I'll gess you could do something like this:

EDIT: Made my solution with your valuenames

JavaScript:

$scope.device = "";
if ((navigator.userAgent.match(/iPhone/)) || (navigator.userAgent.match(/iPod/))) {
 $scope.device = "iphone";
}else if (navigator.userAgent.match(/Android/)) {
 $scope.device = "android"
}

HTML:

<span class="spanMain" title="{{device}}">{{module.Name}}</span>

CSS:

.spanMain{
 font-size: 1em;
 position: absolute;
 bottom: 0;
 right: 0;
 left: 0;
}

.spanMain[title=iphone]{
 font-size: 1em;
}

.spanMain[title=android]{
 font-size: 2em;
}
Mark
  • 6,335
  • 1
  • 29
  • 49
Erex
  • 1,515
  • 1
  • 15
  • 20
  • oh! That is probably because of the resolution! Maybe [THIS](http://stackoverflow.com/questions/9533106/detect-phone-vs-tablet) answers your question? – Erex Jan 15 '14 at 07:48
  • the problem was the target-densityDpi. i change this one to medium-dpi. i don't like this resolve but this is the best solution fot right now thank you. – ben ezra Jan 19 '14 at 07:28