Размер разного размера между iphone и галактикой samsung

Question

Я попытался построить основной вид с помощью PhoneGap. В главном представлении есть несколько кнопок, которые содержат изображение и текст. Каждая кнопка имеет следующие операторы:

<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%;} 

на iPhone это выглядит здорово, но в галактике имя модуля (т.е. текст) в < # span tag #> отображает текст меньшего размера шрифта. , если я изменю размер шрифта в большем размере, на iPhone он отображается на большом, действительно из пропорции, но на галактике все в порядке. как я могу это решить?

Большое спасибо,

Answer 1

Dont знаю, работает ли это решение, но я Гесс вы могли бы сделать что-то вроде этого:

EDIT: Сделано мое решение с 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; 
}