How to develop to all devices resolution?

#1

I want to develop for android, ios, ipad, ipad pro…

is there a way except css @media…(min-…)?

like making the screen to just expand (lets say from iphone 5 to ipad pro) without moving elements?

#2

Ionic has some build in features for that, like split pane. In a normal situation the screen will just expand as desired.

#3

so if elements move to wrong position when i use ‘ionic serve’ i shouldn’t put attention to it? i will get fixed when running on device?

#4

Okay, explain to me ‘move to wrong position’. Do you have an example?

#5

just asked a friend, he told me to work with
vw, vh, vmin…

it works very well.
i havn’t been familiar with this before…

example:
the 2 images needs to be on top of upperRow bg and on top of each other.

  <ion-grid class="grid">
        <ion-row class="upperRow">
            <ion-row class="transparentClockLine">
            <ion-label class="clock">{{ time }}</ion-label>
            </ion-row>

            <ion-row class="profile">
                <ion-img width="250" height="250" src="../assets/img/homePage/ellipse.png" class="profileCircle"></ion-img>
                <ion-img width="250" height="250" src="../assets/img/homePage/man.png" class="profileMan"></ion-img>
                <ion-label id="doLabel">AAA LTD</ion-label>
                <ion-label id="doSubLabel">Smart ERP SYSTEM</ion-label>
            </ion-row>
            </ion-row>
          <!-- </div>
<div style="height=100%"> -->



          <ion-row class="bottomRow">
            <ion-row class="bottomSplitter">
                adasdasd
            </ion-row>
          </ion-row>

.upperRow{
  // height: 41%;
  background: url("../assets/img/homePage/upperBG.png") no-repeat ;
  background-size: cover;
  position: relative;
  height: calc(100vh/3);
  background-position: center 0;
  width: 100%;
  z-index: 2;
  -webkit-box-shadow: inset 0 0 10px #000000;
  box-shadow:         inset 0 0 10px #000000;
}

.transparentClockLine{
  background-color: rgba(255, 255, 255,0.35);
  position: absolute;
  width: 100%;
  height: 8vh;

}
.clock {
font-size: 5vmin;
    @font-face {
        font-family: "Gotham";
        src: url('../assets/img/homePage/gotham.otf');
    }
    color: rgb(255, 255, 255);
    position: relative;
    text-align: center;
  top: 8%;
    -webkit-transform: matrix( 1.4510997612646,0,0,1.4510997612646,0,0);
    -ms-transform: matrix( 1.4510997612646,0,0,1.4510997612646,0,0);
    z-index: 39;
  }
#6

In the case of default ionic components, they should scale automatically. If you implement your own styles, you could use viewport heights and widths. Be aware this won’t work on older devices < Android 4.4 , but since these aren’t really supported by default (unless you use crosswalk) you shouldn’t worry to much about that.

#7

ok thanks! i am not going to support those devices for now…