I'm working on an Android app which uses ionic for UI part; there are some CSS issues which occur when I look my app on different devices. Here and now I have two tablets: 1- a Lenovo TAB2 with 9.43 inches screen size, 160 dpi, and a screen resolution of 1280 x 800. 2-a Lenovo idea-tab with 10.1 inches screen size, 149 dpi, and a screen resolution of 800 x 1280 pixels.
My app looks nice and neat on idea-tab. But when it comes to TAB2, font-size for icons looks larger - even though they receive the same style and I've made sure of that in chrome:inspect-, and the same thing happens for text parts too.
As an example, on the first page, when I check on chrome:inspect, all icons have font-size:190px; but they look larger on TAB2 and all float to left button part of their container.
Does it have anything to do with my tablets' resolution and screen size? is there anything important I'm missing here?
Thanks in advance.
P.S.: 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 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;
}
}
}
P.P.S: My meta tags on index.html go like this:
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
