我正在开发一个 Android 应用程序，使用 Ionic 构建 UI 部分; 当我在不同的设备上查看我的应用程序时，会出现一些 CSS 问题。此时我有两个平板电脑：
1- 九英寸屏幕尺寸，160 dpi，1280 x 800 的联想 TAB2。
2- 十英寸屏幕尺寸，149 dpi，800 x 1280 像素的联想 idea-tab。
我的应用程序在 idea-tab 上看起来漂亮整洁。但是当涉及到 TAB2 时，即使它们接收相同的样式并且我已经在 chrome:inspect 中确认过了，图标的字体大小看起来更大，文本部分也是一样。例如，在第一页上，当我在 chrome:inspect 上检查时，所有图标都具有 font-size:190px; 但它们在 TAB2 上看起来更大，并且所有浮动到其容器的左侧按钮一侧。
这是否与我的平板电脑的分辨率和屏幕尺寸有关？我是否忽略了重要的内容？
先感谢您了。
附：如需要，我在末尾添加了我的第一页代码。
这是CSS的书写方式:
P.P.S：我在index.html中的元标签如下所示：
我的应用程序在 idea-tab 上看起来漂亮整洁。但是当涉及到 TAB2 时，即使它们接收相同的样式并且我已经在 chrome:inspect 中确认过了，图标的字体大小看起来更大，文本部分也是一样。例如，在第一页上，当我在 chrome:inspect 上检查时，所有图标都具有 font-size:190px; 但它们在 TAB2 上看起来更大，并且所有浮动到其容器的左侧按钮一侧。
这是否与我的平板电脑的分辨率和屏幕尺寸有关？我是否忽略了重要的内容？
先感谢您了。
附：如需要，我在末尾添加了我的第一页代码。
<ion-content level-ionside-shifter>
<div class="home-container"
ng-class="{'compact' : (CompactValue == 1), 'fa-font r2l' : (TranslationValue == 1)}">
<ion-slide-box on-slide-changed="slideHasChanged($index)" class="slider-content"
>
<ion-slide>
<div class="row">
<div class="col col-20 scale-hover">
<div class="home-btn color-a" ui-sref="app.factories">
<i class="icon icon-diagnostic"></i>
<span>{{"D_DIAGNOSTICS" | translate}}</span>
</div>
</div>
<div class="col col-20 scale-hover">
<div class="home-btn color-b" ng-click="goToBTPage()">
<i class="icon icon-vci"></i>
<span>{{"D_VCI" | translate}}</span>
</div>
</div>
<div class="col col-20 scale-hover">
<div class="home-btn color-c" ng-click="goToUpdatePage()">
<i class="icon icon-update"></i>
<span>{{"D_UPDATE" | translate}}</span>
</div>
</div>
</div>
</ion-slide>
</ion-slide-box>
</div>
</ion-content>
这是CSS的书写方式:
.home-container {
.slider-slides {
left: 650px;
}
clear: both;
box-decoration-break: clone;
height: 100%;
.slider {
display: flex;
-webkit-flex-direction: column;
-webkit-align-items: center;
-webkit-justify-content: center;
height: 100%;
justify-content: center;
align-items: center;
padding-bottom: 8%;
clear: both;
}
.slider-slides {
height: initial;
}
.slider-pager {
#{$position-inverse}: 0;
bottom: 75px;
}
.col {
position: relative;
}
.row {
display: flex;
padding: 5px;
width: 100%;
margin: auto;
align-items: center;
justify-content: center;
}
.row-2 {
padding-top: 4%;
}
.col-offset-r {
margin-right: 0;
}
.col-offset-l {
margin-left: 0;
}
.slider-pager .slider-pager-page {
color: #6b69a5;
}
.home-btn {
position: relative;
display: block;
background: $color-f;
text-align: center;
width: 130px;
height: 130px;
margin: auto;
border-radius: 15px;
box-shadow: 0 4px 0 darken($color-f, 17%);
@include transition(0s);
span {
position: absolute;
display: block;
margin: auto;
width: 140%;
margin-left: -20%;
margin-right: -20%;
bottom: -35px;
color: #fff;
text-shadow: 0 2px 3px #000;
cursor: default;
//font-size: 1.2em;
@if $font_choice == 1{
font-size: $font_mainMenu_small;
}
@if $font_choice == 2{
font-size:$font_mainMenu_middle;
}
@if $font_choice == 3{
font-size:$font_mainMenu_large;
}
}
i {
position: absolute;
display: block;
width: 130px;
height: 130px;
margin: auto;
text-align: center;
vertical-align: middle;
font-size: 130px;
color: #fff;
&:before{
margin-left: -100%;
margin-right: -100%;
top:-50%;
}
}
em {
position: absolute;
display: block;
top: -10px;
right: -10px;
font-style: normal;
text-align: center;
color: $color-c;
background: #fff;
padding: 8px 10px;
border-radius: 50%;
min-width: 36px;
box-shadow: 0 0 7px darken($color-c, 17%);
}
&.color-a {
background: $color-a;
box-shadow: 0 4px 0 darken($color-a, 17%);
}
&.color-b {
background: $color-b;
box-shadow: 0 4px 0 darken($color-b, 17%);
}
&.color-c {
background: $color-c;
box-shadow: 0 4px 0 darken($color-c, 17%);
}
&.color-d {
background: $color-d;
box-shadow: 0 4px 0 darken($color-d, 17%);
}
&.color-e {
background: $color-e;
box-shadow: 0 4px 0 darken($color-e, 17%);
}
&.color-f {
background: $color-f;
box-shadow: 0 4px 0 darken($color-f, 17%);
i {
color: #505258;
}
}
&:active, &:focus {
transform: scale(0.9) !important;
-webkit-transform: scale(0.9) !important;
}
&.hover {
transform: scale(0.9) !important;
}
}
}
P.P.S：我在index.html中的元标签如下所示：
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
设置>显示>字体大小。 - Swapnil Patwa