IONIC字體大小看起來不同在不同的設備

Question

我正在使用離子UI部分的Android應用程序;當我在不同的設備上查看我的應用程序時，會發生一些CSS問題。 在這裏，現在我有兩個平板電腦： 1 - 聯想TAB2屏幕尺寸爲9.43英寸，160 dpi，屏幕分辨率爲1280 x 800. 2-a聯想Idea屏幕，屏幕尺寸爲10.1英寸，149 dpi，屏幕分辨率爲800 x 1280像素。

我的應用程序看起來不錯，整潔的想法選項卡上。但是當談到TAB2時，圖標的font-size看起來更大 - 即使它們獲得相同的樣式，我已經確認了chrome:inspect - ，並且文本部件也發生了同樣的情況。 舉例來說，在第一頁上，當我檢查chrome:inspect時，所有圖標都有font-size:190px;，但它們在TAB2上看起來更大，並且全部浮動到它們容器的左側按鈕部分。

它與我的平板電腦的分辨率和屏幕尺寸有什麼關係？有什麼重要的我在這裏失蹤？

在此先感謝。

P.S .:如果這會有幫助，我會在最後加上我的首頁代碼。

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

PPS：我在index.html的meta標籤是這樣的：

<meta charset="utf-8"> 
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 

Answer 1

您可以嘗試降低設備字號settings > display > font size 。