IONIC font size differs on different devices

I am working on an Android application that uses the ionic part for the user interface; there are some CSS issues that come up when I view my app on different devices. Here and now I have two tablets: 1- Lenovo TAB2 with a screen size of 9.43 inches, 160 dpi and a screen resolution of 1280 x 800.2nd Lenovo idea with a screen size of 10.1 inches, 149 dpi and a screen resolution of 800 x 1280 pixels.

My app looks nice and tidy on idea-tab. But when it comes to TAB2, font-size

it looks bigger for icons - even if they get the same style, as I'm sure of that in chrome:inspect

- and the same thing happens for text parts. For example, on the first page, when I check chrome:inspect

, all the icons have font-size:190px;

, but they look more on TAB2 and all the floating point parts to the left of their container.

Does it have anything to do with screen resolution and screen size? is there something important that i am missing here?

Thanks in advance.

PS: In case it would be helpful, I added my first page code at the end.

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

      

        
        
        
      

    

and this is how the css is written:

   .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: My meta tags on index.html look like this:

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