Влияет ли мобильная клавиатура на высоту в медиазапросах CSS?

Question

Я пытаюсь написать CSS для iPhone 5 или аналогичных устройств с небольшой высотой экрана. Ситуация ухудшается, когда открыта мобильная клавиатура и на экране очень мало места. Я хочу удалить несколько элементов, когда страница становится очень короткой из-за клавиатуры.

Итак, я попробовал это

@media all and (max-height: 400px) {
  display: none;
}

Но элемент все еще присутствует на странице, когда клавиатура всплывает. И высота страницы определенно меньше 400 пикселей.

UPDATE

Я спрашиваю, потому что я видел несколько вопросов о SO (, например, здесь ) или статьях вне SO, в которых говорится, что виртуальная клавиатура влияет на высоту или даже ориентацию (потому что ориентация считается портретом, если высота больше, чем ширина, но на устройствах меньшего размера, когда клавиатура всплывает, ширина становится больше высоты, и устройство переключается в альбомный режим).
Это все еще актуальное или устаревшее поведение?

Я пробовал также

@media all and (orientation: landscape) {
    ...
}

Да, работает, когда устройство находится в ландшафтном режиме. Нет, он не работает, когда всплывающая клавиатура и высота веб-страницы меньше ее ширины.

Answer 1

Нет - размер области просмотра не изменяется при появлении клавиатуры на iOS.

Хотя, это помещает входные данные в фокус и вид. Только на Android, меняется ли с открытием виртуальной клавиатуры (хотя бы на Chrome)

Что касается вашего обновления, этот ответ стоит. Это текущее поведение, демонстрируемое iOS. Я проверил это на iOS 12 и Samsung S8, и они оба ответили, как и ожидалось выше.

Проблема, с которой вы столкнулись, возникает из-за того, что устройство не сообщает о новом размере области просмотра, если появляется виртуальная клавиатура. Он «плавает» над браузером, поэтому содержимое под ним остается с тем же разрешением.