Textarea в браузерах Android, скрытых клавиатурой

В iOS даже для текстовых областей, содержащихся в div с position: fixed , когда текстовая область имеет фокус, ОС гарантирует, что она видна (что иногда означает, что все окна браузера увеличиваются), так что текстовая область не скрыта клавиатурой ,

В браузерах Android (я протестировал браузер обозревателя как в версиях 2.3, так и 4.0, а также в Chrome 4.0), этого не происходит. Текстовая реклама покрывается клавиатурой, и пользователь не может видеть, что она печатает.

Как временный обходной путь для Android, я установил position: fixed в textarea:focus и переместит его в верхнюю часть экрана, чтобы гарантировать, что он будет видимым.

Есть ли еще более элегантные решения, которые поддерживают целостность моего макета?

Я сделал небольшой пример в jsfiddle. Просмотрите в браузере Android, чтобы узнать, что я имею в виду: http://fiddle.jshell.net/5cvj5/show/light/

То, что я закончил делать, и то, что я обнаружил, что Facebook делает для преодоления одной и той же проблемы, заключалось в том, чтобы добавить элемент разделительного блока под текстовым полем, когда он получает фокус, а затем прокручивается до нижней части представления, например:

 var android_spacer = $('<div/>', { 'class' : 'android_spacer' }).css({ 'width' : '100%', 'height' : '200px' }).appendTo($('#parent_view')); $('#the_textarea').on('focus', function() { $(this).after(android_spacer); }); $('#the_textarea').on('blur', function() { $('.android_spacer').remove(); }); 

Обратите внимание, что на экране есть только один экран.

Просто сделайте положение нижнего колонтитула абсолютным и установите нижнее значение на 0, это будет обрабатывать его