Ionic - Масштаб изображения не учитывается на некоторых устройствах

Question

Я сделал приложение с Ionic Framework, и у меня возникла проблема на некоторых устройствах.Это моя домашняя страница:

И на некоторых устройствах (iPhone 5S, iPhone 5C, Samsung S5) страница отображается так:

Эта страница сделана с использованием ионной сетки.Вот часть моего css:

    ion-grid{
        height: 100%;

        ion-row.homeM{
            height: 20%;

            img{
                height: 80%;
            }
            p{
                margin-top: 0px;
            }
        }

        ion-row.homeML{
            height: 25%;

            img{
                height: 75%;
            }
            p{
                margin-top: 0px;
            }
        }
    }

ion-row.homeM для портретного отображения, а ion-row.homeML для альбомного отображения.

Помощь приветствуется :)!

Спасибо

Answer 1

Для создания адаптивного дизайна попробуйте использовать "vh для высоты" и "vw для ширины" или "em" вместо "px или%" sooпопробуйте это:

 ion-grid{
 height:98vh;
  ion-row.homeM{
    height: 40vh;

    img{
        height: 100vh;
      /*you can add max-height to prevent img to be stretched*/
         max-height:100px;//for example
        width:30vw;
    }
    p{
        margin-top: 0px;
    }
  }
}

Я надеюсь, что эта помощь, и вы можете узнать больше о том, что я сказал отсюда: Блок ViewPort

Answer 2

Вы пытались указать максимальную высоту в пикселях, точках на дюйм, em или в других единицах?
Это может быть связано с проблемой разрешения / пробела из-за процента в css.

Попробуйтечто-то вроде:

ion-grid{
    height: 100%;

    ion-row.homeM{
        height: 80px;

        img{
            height: 60px;
        }
        p{
            margin-top: 0px;
        }
    }

    ion-row.homeML{
        height: 60px;

        img{
            height: 40px;
        }
        p{
            margin-top: 0px;
        }
    }
}