От автора: когда я впервые услышал о vh (высота области просмотра), я был взволнован и подумал, что могу использовать его для блоков с фиксированной высотой вместо использования javascript. Обычно высота 100vh учитывает отрегулированную высоту, поэтому иногда вы можете увидеть, как мобильные страницы становятся странными, когда адресная строка браузера скользит вниз.
Если вы открыли браузер и начали загружать веб-сайт, 1vh равнялось 1% от высоты вашего экрана за вычетом интерфейса браузера. В Safari Mobile, если вы начнете прокручивать, высота области просмотра будет выше, чем видимая часть документа. Это хорошо известная проблема (по крайней мере, в Mobile Safari). Вот несколько решений этой проблемы.
Решение 1: -webkit-fill-available
body { min-height: 100vh; min-height: -webkit-fill-available;
}Решение 2. Медиа-запросы CSS
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) { .foo { height: 1024px; } } /* iPad with landscape orientation. */ @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) { .foo { height: 768px; } } /* iPhone 5 You can also target devices with aspect ratio. */ @media screen and (device-aspect-ratio: 40/71) { .foo { height: 500px; } }Решение 3. Баггифилл единиц на основе области просмотра
Вы можете заставить единицы на основе области просмотра (vh | vw | vmin | vmax) правильно работать в Mobile Safari с помощью баггифилла единиц на основе области просмотра. Баггифилл выполняет итерацию по всем определенным стилям, известным документу, и извлекает те, которые используют единицы на основе области просмотра. После сопоставления относительных единиц с размерами области просмотра CSS объединяется и вводится в документ в виде элемента <style>.
Решение 4. Таргетинг innerHeight с помощью Javascript
Попробуйте установить высоту страницы (используя javascript) с помощью свойства window.innerheight.
window.onresize = function() { document.body.height = window.innerHeight;
}
window.onresize();Автор: Ronalds Vilcins
Источник: https://medium.com
Редакция: Команда webformyself.