Давая высоту в процентах сжимает поля ввода, когда открыта мягкая клавиатура в планшетах Android.

Question

У меня проблема в планшетах Android с страницей с полями ввода. Всякий раз, когда какая-либо лента в поле ввода для ввода какой-то мягкой клавиатуры открывается, поля ввода выглядят сжатыми, как видно на изображении. Я использую ниже CSS:

html,body{ 
    height:100%; 
    } 
    .form{ 
    height:100%; 
    } 
    .container{ 
    height:100%; 
    } 

Answer 1

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

Может попытаться добавить min-height к телу так, чтобы его дети не получат пострадавших, если окно становится слишком мал:

html,body{ 
    min-height: 300px; 
    height: 100%; 
}