Минимальный пользовательский интерфейс iOS 7.1, вызывающий проблемы с блоком css высоты окна просмотра (vh)

начиная с iOS 7.1, когда вы прокручиваете страницу вниз, размер области просмотра изменяется, но это не обновляет 100vh. Есть ли способ остановить минимальный пользовательский интерфейс или обновить область просмотра при прокрутке?

пример сайта http://goo.gl/Umbd47

Я включил изображение проблемы ниже и одно из того, как она должна выглядеть.

пример неправильной высоты окна просмотра

введите здесь описание изображения


iphone html css safari ios7.1
person code_cookies    schedule 18.08.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Если элемент прокрутки не body, минимальный пользовательский интерфейс не должен активироваться.

Оберните свой контент в div с overflow: auto и установите overflow вашего тела на visible. Высота и ширина body и div должны быть равны 100%.

Итак, ваш css может выглядеть так:

body {
    width: 100%;
    height: 100%;
    overflow: visible;
}

#container {
    width: 100%;
    height: 100%;
    overflow: auto;
}
person quw    schedule 18.08.2014
comment
но это ломает липкую панель навигации и кнопки навигации на странице. - person code_cookies; 18.08.2014
comment
Вам придется изменить свой липкий javascript, чтобы использовать событие/свойства прокрутки div, а не документа. Если вам нужно поддерживать только iOS, вы можете использовать position: sticky, который должен работать (я провел быстрый тест, обернув содержимое следующей демо-страницы с помощью div с css из моего ответа, и это сработало). демонстрационная страница - person quw; 19.08.2014