eltorxid » 03 сен 2017, 21:27
В мобильных версиях chrome и yandex стили ведут себя по разному из-за того что chrome отбирает от высоты экрана устройства 56px под навигационную панель сверху.
А yandex-нет. Он игнорирует навигационную панель и расстягивает блок по всей высоте устройства.
В связи с этим возникла проблема в разработке.
Нужно под яндекс браузер и хром отдельно стили прописать.
Пример проблемы:
В случае с chrome используется следующее правило
.div {
height: calc(100vh - 56px);
}
такое правило растягивает на весь экран устройства в chrome.
*56px - это высота навигационной панели сверху браузера, но оно не подойдет для yandex браузера, т.к. внизу экрана останется пустой пробел высотой в эти 56px.
для yandex браузера, firefox, opera подойдет только такое правило
.div {
height: 100vh;
}
Использование css хаков не помогает
Как решить данную проблему?
В мобильных версиях chrome и yandex стили ведут себя по разному из-за того что chrome отбирает от высоты экрана устройства 56px под навигационную панель сверху.
А yandex-нет. Он игнорирует навигационную панель и расстягивает блок по всей высоте устройства.
В связи с этим возникла проблема в разработке.
Нужно под яндекс браузер и хром отдельно стили прописать.
Пример проблемы:
В случае с chrome используется следующее правило
.div {
height: calc(100vh - 56px);
}
такое правило растягивает на весь экран устройства в chrome.
*56px - это высота навигационной панели сверху браузера, но оно не подойдет для yandex браузера, т.к. внизу экрана останется пустой пробел высотой в эти 56px.
для yandex браузера, firefox, opera подойдет только такое правило
.div {
height: 100vh;
}
Использование css хаков не помогает
Как решить данную проблему?