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中＆lt; #span tag＃＆gt;中的模块名称（即文本）以较小的字体大小显示文本。如果我将字体大小更改为更大的尺寸，在iPhone上它显示的方式是大的，真的不成比例，但在星系上它没关系。我怎么解决这个问题？

非常感谢，

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

iphone和三星galaxy之间的字体大小不同

1 个答案: