La taille de la police IONIC est différente dans les différents appareils

Question

Je travaille sur une application Android qui utilise une partie ionique pour l'interface utilisateur; il y a quelques problèmes de CSS qui se produisent quand je regarde mon application sur différents appareils. Ici et maintenant j'ai deux tablettes: 1- un Lenovo TAB2 avec 9,43 pouces de taille d'écran, 160 dpi, et une résolution d'écran de 1280 x 800. 2-a Lenovo idée-onglet avec 10,1 pouces taille de l'écran, 149 dpi, et une résolution d'écran de 800 x 1280 pixels.

Mon application est belle et nette sur l'idée-onglet. Mais quand il s'agit de TAB2, font-size pour les icônes semble plus grand - même si elles reçoivent le même style et je me suis assuré de cela dans chrome:inspect -, et la même chose arrive pour les parties de texte aussi. À titre d'exemple, sur la première page, lorsque je vérifie chrome:inspect, toutes les icônes ont font-size:190px; mais elles semblent plus grandes sur TAB2 et toutes flottent sur la partie gauche de leur conteneur.

Cela a-t-il quelque chose à voir avec la résolution et la taille de l'écran de mes tablettes? Y at-il quelque chose d'important que je manque ici?

Merci d'avance.

P.S .: Au cas où cela serait utile, j'ai ajouté mon code de première page à la fin.

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

et voici comment css est écrit:

.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: Mes balises meta sur rendez-vous index.html comme ceci:

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

Answer 1

Vous pouvez essayer de réduire la taille de la police de périphérique settings > display > font size .