jquery - iphone 和三星 galaxy 字体大小不同

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 上它看起来很棒，但是在 galaxy 中，<#span tag#> 中的模块名称(即文本)以较小的字体显示文本。 如果我将字体大小更改为更大的大小，在 iPhone 上它会显示得很大，真的不成比例，但在 galaxy 上它没问题。我该如何解决？

非常感谢，

Answer 1

不知道这个解决方案是否有效，但我猜你可以这样做:

编辑:用您的值名称制作我的解决方案

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