Предотвращение изменения размера видового экрана веб-страницы при активной клавиатуре Android

Я разрабатываю плагин Javascript/JQuery для адаптивного веб-дизайна. Он имеет функцию, которая контролирует область просмотра для изменений, в частности, изменение размера и ориентацию. Когда обнаружено изменение, вызывается соответствующая функция обратного вызова.

Тем не менее, я просто заметил, что на Android (особенно с использованием браузера акций в Google Galaxy Nexus), если пользователь пытается использовать мягкую клавиатуру, он изменяет размер окна просмотра, тем самым активируя функцию обратного вызова. Это поведение, которое я бы хотел устранить.

Есть ли способ - через Javascript - отключить это поведение или обнаружить его, чтобы я мог внести изменения в базу кода для его размещения?!

Решения, которые я видел до сих пор, должны делать в основном с Android App Development, и я не уверен, что они применимы в моем случае.

Спасибо.

Ответы

Ответ 1

Хорошо, хорошо после некоторой возни вокруг я нашел решение моей проблемы.

Так что же происходит, когда программная клавиатура отображается/скрывается?! В моем тесте viewport width области viewport width остается постоянной. Однако viewport height области viewport height изменяет размер [ ((current - previous)/previous)*100 ], когда экранная клавиатура отображается на 43% (в портретной ориентации) и на 58% (в альбомной ориентации); и когда софт-клавиатура скрыта на 73% (в портретной ориентации) и 139% (в альбомной ориентации) соответственно.

Поэтому я отключил функцию обратного вызова, когда выполняются все следующие условия:

  1. Устройство мобильное
  2. Процентное изменение ширины области просмотра составляет менее 1%
  3. Процентное изменение высоты области просмотра превышает 35%

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

Вы можете увидеть образец кода здесь: https://github.com/obihill/restive.js/blob/f051fe6611e0d977e1c24c721e5ad5cb61b72c1c/src/restive.js#L4419. К сожалению, это часть большого кодового набора, но вы должны быть в состоянии понять основную идею, основанную на условных выражениях.

Приветствия.

Ответ 2

У меня была аналогичная проблема. И мое решение состояло в том, чтобы использовать событие изменения ориентации вместо события изменения размера, которое срабатывает, когда вы меньше всего ожидаете его на Android: P

$(window).bind( 'orientationchange', function(e){ // Type pretty code here });

источник: http://www.andreasnorman.com/dealing-androids-constant-browser-resizing/

Ответ 3

Я могу поделиться с вами своим pretty code. Я устанавливал триггер на событие resize и высоту подсчета относительно события перед изменением размера.

originalHeight * 100/currentHeight дает вам originalHeight * 100/currentHeight который вы можете изменить высоту контейнера

Вы можете увидеть образец кода здесь https://jsfiddle.net/ocg9Lus7/

ОБНОВЛЕНИЕ 19.11.2018

Я рекомендую вам изменить значение с динамического (100%, VH и т.д.) На статическое значение после окна загрузки. Если вам нужно больше динамического контейнера, вы можете пересчитать размеры, отключив функцию resize события (originalHeight * 100/currentHeight)

Вы можете увидеть образец кода здесь: https://jsfiddle.net/gbmo6uLp/