Неправильный размер нижнего колонтитула или области просмотра jQuery после показа клавиатуры Android

Question

У меня следующая проблема с мобильным веб-приложением jquery.

У меня есть фиксированный нижний колонтитул для моего приложения jquery, но когда открывается клавиатура Android (т.е. при нажатии на панели браузера и перезагрузке страницы вручную), создается впечатление, что область просмотра находится только сверху (под панелью браузера) вниз к верхнему краю клавиатуры. Затем страница перезагружается, и высота области просмотра сохраняет этот размер, поэтому он становится слишком маленьким, когда клавиатура снова скрывается. Как принудительно изменить размер, когда клавиатура снова скрыта?

Большое спасибо за вашу помощь.

Answer 1

Попробуйте добавить этот метатег в заголовок.Это может решить вашу проблему:

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

Answer 2

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

var ua = navigator.userAgent.toLowerCase();
var isAndroid = /android/i.test(ua);
if(isAndroid) {
    setTimeout(function(){
        viewport = document.querySelector("meta[name=viewport]");
        viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
    },100);         
} else {
    viewport = document.querySelector("meta[name=viewport]");
    viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
}

Измените время ожидания, как вам нравится, но слишком короткое, и оно не всегда работает.Единственная проблема заключается в том, что вы получаете флэш-версию более короткого контента на Android.Лучше было бы запустить события смены ориентации или изменения размера для перерисовки после того, как клавиатура исчезла, но я не смог заставить окно перерисовать на нужной высоте через JS.

Answer 3

Невозможно избежать такого поведения с помощью JavaScript или CSS. Проверьте эту информацию ссылка

Answer 4

Попробуйте связать с событием resize на window