Ioni c 4, как сделать отзывчивое приложение, используя медиа-запросы?

Question

Я создаю гибридное приложение с Ioni c 4.

Я использую css медиазапросов, чтобы сделать определенные c макеты в соответствии с размером экрана, необходим мобильный. Пример:

Вот так выглядит мое приложение в окне просмотра с размером экрана 360x640 пикселей в браузере:

Но вот как в моем мобильном телефоне он имеет одинаковый размер экрана (360x640) в пикселях:

Вся синяя часть отсекается от экрана.

вот css:

@media screen and (max-height: 640px) {


.ultraipunt{   
    font-size:19px;
}

.tittle{
  font-size: 23px;
}

.tittle3{
  font-size: 19px;
}

.buttonclass{
    font-size:19px;
    height:60px;
}

.buttonfacebook{
    font-size:19px;
    height:60px;
}

.buttongoogle{
    font-size:19px;
    height:60px;
}

.fond1{
   min-height: 154px;
}

.fond2{
   padding-top:0.5em;
  padding-bottom:0.5em;
  margin-top:0px;
}
.textwhite {
    font-size:18px;
}
.textwhitebold {
    font-size:18px;
}

form{
    margin-bottom:0em;
    margin-top:0em;
}

.imgen1{
 width:65px;
}


}

Использование сайта: https://www.mydevice.io/, это мои характеристики мобильного телефона:

Теперь мои вопросы:

Почему размеры css плохо переводятся в окно просмотра моего мобильного телефона? Как сделать адаптивный дизайн с помощью ioni c 4 для гибридного приложения?

Answer 1

В вашем захвате mydevice.io можно увидеть screen.width и screen.height. Вы не должны использовать эти свойства для расчета вашего доступного разрешения области просмотра , потому что оно всегда будет возвращать полное разрешение экрана (которое действительно составляет 360px x 640px), а не разрешение вашего окна просмотра (которое обычно будет меньше по высоте и иногда меньше ширины) , для мобильных телефонов, в зависимости от режима отображения, а также от того, отображается ли строка состояния и отображается ли панель кнопок).

Вместо screen.width и screen.height используйте одну из нескольких альтернатив, которая даст вам реальный доступный видовой экран для вашего приложения: например, window.innerWidth и window.innerHeight .

Вероятно, вы получите меньше чем 640px в window.innerHeight.

В отношении медиазапросов из css будет использоваться разрешение области просмотра, но вы указали max-height: 640px, а поскольку высота области просмотра меньше 640px, соответствует правилу , даже если высота меньше, даже если вы хотите другую вещь.

Итак, пока ваш реальный ч восемь меньше 640 пикселей, вы должны добавить другие / более css правила с еще меньшей высотой или, возможно, использовать другой подход (нижняя привязка или для более сложного сценария ios JS для динамической помощи c отзывчивость, основанная на innerHeight / свойства innerTop).

PS Немного вне topi c, но очень важно: всегда, если вы сами используете css -ответ, попробуйте дважды проверить, есть ли окно просмотра мета с хотя бы width = device-width, в противном случае мобильный html рендерер, вероятно, будет делать странные вещи.

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

PS2 Я предполагаю, что вы хотите использовать свои собственные таблицы стилей, в противном случае, вероятно, существуют тонны уже готового материала для ioni. c.

Answer 2

вы должны использовать реагирующую сетку ioni c для адаптивного дизайна в Ioni c: https://ionicframework.com/docs/layout/grid

По умолчанию сетка будет занимать 100 % ширина Чтобы задать ширину c в зависимости от размера экрана, добавьте фиксированный атрибут. Ширина сетки для каждой точки останова определяется в --ion-grid-width- {точка останова}