iOS 5 фиксированное позиционирование и виртуальная клавиатура - PullRequest
Новая
       18

iOS 5 фиксированное позиционирование и виртуальная клавиатура

135 голосов
/ 01 ноября 2011

У меня есть мобильный веб-сайт, у которого div прикреплен к нижней части экрана с помощью позиции: исправлено.Все отлично работает в iOS 5 (я тестирую на iPod Touch), пока не окажусь на странице с формой.Когда я нажимаю на поле ввода и появляется виртуальная клавиатура, внезапно фиксированная позиция моего div теряется.Теперь div прокручивает страницу до тех пор, пока клавиатура видна.Как только я нажимаю «Готово», чтобы закрыть клавиатуру, div возвращается в свое положение в нижней части экрана и подчиняется правилу position: fixed.

Кто-нибудь еще сталкивался с подобным поведением?Это ожидается?Спасибо.

Ответы [ 25 ]

0 голосов
/ 28 мая 2015

Это все еще большая ошибка для любых HTML-страниц с более высокими Модальностями Bootstrap в iOS 8.3. Ни одно из предложенных выше решений не сработало, и после увеличения любого поля ниже сгиба высокого модального уровня Mobile Safari и / или WkWebView переместили бы фиксированные элементы туда, где была расположена прокрутка тела HTML, оставив их смещенными относительно того места, где они на самом деле где выложены.

Чтобы обойти ошибку, добавьте прослушиватель событий к любому из ваших модальных входов, например: 

$(select.modal).blur(function(){
  $('body').scrollTop(0);
});

Я предполагаю, что это работает, потому что форсирование высоты прокрутки тела HTML приводит к повторному выравниванию фактического представления с тем, где iOS 8 WebView ожидает, что содержимое фиксированного модального div будет.

0 голосов
/ 17 апреля 2013

Нашли это решение на Github.

https://github.com/Simbul/baker/issues/504#issuecomment-12821392

Убедитесь, что у вас есть прокручиваемый контент. 

// put in your .js file
$(window).load(function(){
    window.scrollTo(0, 1);
});

// min-height set for scrollable content
<div id="wrap" style="min-height: 480px">
  // website goes here
</div>

Адресная строка складывается как дополнительный бонус.

0 голосов
/ 15 мая 2013

На случай, если кто-нибудь захочет попробовать это. Я получил следующую работу для фиксированного нижнего колонтитула с полем ввода в нем. 

<script>
    $('document').ready(
        function() {
            if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)
                  || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i)) {
                var windowHeight = $(window).height();
                var documentHeight = $(document).height();

                $('#notes').live('focus', function() {
                    if (documentHeight > windowHeight) {
                        $('#controlsContainer').css({
                            position : 'absolute'
                        });
                        $("html, body").animate({
                            scrollTop : $(document).height()
                        }, 1);
                    }
                });
                $('#notes').live('blur', function() {
                    $('#controlsContainer').css({
                        position : 'fixed'
                    });
                    $("html, body").animate({
                        scrollTop : 0
                    }, 1);
                });
            }
        });
</script>
0 голосов
/ 25 июня 2013

У меня та же проблема.Но я понял, что фиксированная позиция просто задерживается и не нарушается (по крайней мере, для меня).Подождите 5-10 секунд и посмотрите, вернется ли div к нижней части экрана.Я считаю, что это не ошибка, а задержка ответа при открытой клавиатуре.

0 голосов
/ 19 июля 2013

Я перепробовал все подходы из этой темы, но если они не помогли, они сделали еще хуже.В конце концов, я решил заставить устройство потерять фокус: 

$(<selector to your input field>).focus(function(){
    var $this = $(this);
    if (<user agent target check>) {
        function removeFocus () {
            $(<selector to some different interactive element>).focus();
            $(window).off('resize', removeFocus);
        }
        $(window).on('resize', removeFocus);
    }
});

, и это сработало как заклинание и исправило мою липкую форму для входа.

Пожалуйста ПРИМЕЧАНИЕ:

  1. Приведенный выше код JS предназначен только для представления моей идеи. Чтобы выполнить этот фрагмент, замените значения в угловых скобках (<>) соответствующими значениями для вашей ситуации.
  2. Этот код предназначен для работы с jQuery v1.10.2
Страница:
...