Проблема с мобильной версией chrome

Обсуждение вопросов клиентского программирования.

Модератор: Duncon

Ответить
eltorxid
Сообщения: 1
Зарегистрирован: 03 сен 2017, 21:25

В мобильных версиях chrome и yandex стили ведут себя по разному из-за того что chrome отбирает от высоты экрана устройства 56px под навигационную панель сверху.

А yandex-нет. Он игнорирует навигационную панель и расстягивает блок по всей высоте устройства.
В связи с этим возникла проблема в разработке.

Нужно под яндекс браузер и хром отдельно стили прописать.

Пример проблемы:

В случае с chrome используется следующее правило

.div {
height: calc(100vh - 56px);
}

такое правило растягивает на весь экран устройства в chrome.
*56px - это высота навигационной панели сверху браузера, но оно не подойдет для yandex браузера, т.к. внизу экрана останется пустой пробел высотой в эти 56px.

для yandex браузера, firefox, opera подойдет только такое правило

.div {
height: 100vh;
}

Использование css хаков не помогает
Как решить данную проблему?
Вложения
error.jpg
Аватара пользователя
AiK
Сообщения: 2286
Зарегистрирован: 13 фев 2004, 18:14
Откуда: СПб
Контактная информация:

Варианты:
1. Использовать min-height 100%
2. Менять высоту динамически, с помощью JavaScript.
Даже самый дурацкий замысел можно воплотить мастерски
Ответить