Обработка абсолютного расположения с появлением клавиатуры смартфона - PullRequest
Новая
       9

Обработка абсолютного расположения с появлением клавиатуры смартфона

2 голосов
/ 13 мая 2019

Итак, я пытался реализовать целевую страницу для мобильного просмотра, которую вы можете увидеть здесь: https://i.imgur.com/4Ju5XGs.png Пока все работает нормально.

Но как только пользователь захочет представитьего имя пользователя и пароль, клавиатура от Android появляется, и моя проблема появляется, как вы можете видеть здесь: https://i.imgur.com/uT4LKrQ.png

Мои элементы (логотип и форма) размещены через абсолютное положение, чтобы сохранить макет на месте независимо от того,Размер экранаЯ подозреваю, что это моя главная проблема.

Вот действительно очень быстрое перо, чтобы продемонстрировать, в чем заключается проблема: https://codepen.io/Gallow/full/BeLWVG (https://codepen.io/Gallow/pen/BeLWVG, чтобы увидеть быстрый код)

Чтобы отобразить клавиатуру Android, необходимо включить панель инструментов устройства Google в меню отладки Chrome, затем нажмите, чтобы выбрать устройство, и нажмите кнопку «Изменить».

Оттуда откроется список и проверит Nexus 5X.Процедура описана здесь: Как вызвать мобильную клавиатуру в Chrome Dev Tools? Чтобы переключить клавиатуру, просто нажмите на параметры экрана (чтобы изменить ориентацию) и выберите Портрет - Клавиатура

Я думаю, что это может быть код причины: (вы можете видеть тот же код на ручке) 

.logo
{
    position : absolute;
    z-index: 100;
    width: 80%;
    left: 10%;
    top: 7.5%;
}
.container__action
{
    position: absolute;
    z-index: 100;
    bottom: 5%;
    width: 80%;
    left : 10%;
    text-align: center;
}

Как вы можете видеть, все помещается через абсолют.По мере появления клавиатуры размер тела резко уменьшается, в результате чего форма перемещается вверх и размещается перед логотипом.

Я не могу найти правильный способ применения этого макета без использования абсолютногопоместите элемент, пока он работает, когда клавиатура уменьшит размер корпуса.

Большое спасибо!

1 Ответ

0 голосов
/ 13 мая 2019

Я бы предложил разделить ваш CSS на две секции, одна из которых имеет соотношение сторон с очень квадратным соотношением (например, 1: 1, вы должны увидеть, какое разрешение вы получаете для каких пропорций) и установить для display логотипа значение none (это довольно распространенное решение, когда клавиатура видна).

Если вы не знаете, как это сделать, см. здесь о @media запросе.

Другой вариант (если вы не хотите использовать запрос @media) - прослушивать события focus и blur ввода (фокус означает, что вход выбран, размытие означает, что он больше не выбран) и переключаться логотип с использованием JavaScript.

...