Make an Ionic App Responsive

Ionic

Ionic is an all encompassing framework for building a hybrid mobile app based on AngularJS technology.

For look and feel, one can use CSS (.css) or SASS (.scss).

Responsiveness Aspects

To fit the app to different screen sizes one has two consider these aspects:

  • screen layout

  • font size

There are a variety of approaches, including using one of the following or a mixture of:

  1. em for font-size

  2. rem for font-size

  3. % for elements size and position in the screen layout (top, etc., width etc.)

Drawbacks of Common Approaches

Approaches that target the font size, are based on some base settings of the font size. Any other font size specification is derived from the base setting. However, the base setting is not directly related to the screen size.

Approaches that target the layout only, such as percentage, do not impact the font size. However, it is known that unless you fit the font size to the screen width and height you will get a crummy look.

Percentage specification has another disadvantage that by looking at the number, such as 35%, you cannot deduce the dimension of the screen relative to which you specify the percentage. Is it the width or the height? You need to look into your CSS structure.

How to Fit the Different Screens

The best that we found useful is using the viewport height (vh) and width (vw).

These fit everything to the screen:

  1. font size

  2. size and position of elements

For a more detailed description of viewport width and height dimensions see SIZING WITH CSS3'S VW AND VH UNITS.

When using vw and vh you immediately know whether the number refers to width, e.g. 25vw, or height, e.g. 30vh.

Do Not Use Relative

When using viewport height and width, there is no need to use:

    position: relative;

It comes naturally.

Also, in contrast to what is advised often, do not use !important for dimensions.

Verical Layout

Ionic grid is based on Flexbox. As the grid is built from horizontal rows, the grid takes care for horizontal the layout of columns along a row. But the grid does not take care for the vertical layout of rows along the height of the screen.

Vertical layout requires a Flexbox layout of rows along the vertical dimension. To do that, enclose the rows in a container:

  <div class=“my-container">

      <div class=“row first-row">…</div>

      <div class=“row second-row">…</div>

      <div class=“row third-row">…</div>

  </div>

Specify the container as Flexbox layout,

  .my-container {

       display: flex;

       flex-direction: column;

  }

And the relative sizes of the rows using the flex property:

 .first-row {

       flex: 1;

 }

 .second-row {

       flex: 2;

 }

 .third-row {

       flex: 1;

 }

where in the layout above, the second row will occopy half of the height of the container, and the other rows will each occupy a quarter of the height.