Блог

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

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

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

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

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

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

Для тех, кто еще испытывает эту проблему с 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 отображается более короткий контент. Лучшим решением было бы запустить события orientationchange или resize для перерисовки после отключения клавиатуры, но я не смог заставить окно перерисовываться на правильной высоте с помощью JS.

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