Баг viewport в Mobile Safari

Баг viewport в Mobile Safari

От автора: когда я впервые услышал о vh (высота области просмотра), я был взволнован и подумал, что могу использовать его для блоков с фиксированной высотой вместо использования javascript. Обычно высота 100vh учитывает отрегулированную высоту, поэтому иногда вы можете увидеть, как мобильные страницы становятся странными, когда адресная строка браузера скользит вниз.

Если вы открыли браузер и начали загружать веб-сайт, 1vh равнялось 1% от высоты вашего экрана за вычетом интерфейса браузера. В Safari Mobile, если вы начнете прокручивать, высота области просмотра будет выше, чем видимая часть документа. Это хорошо известная проблема (по крайней мере, в Mobile Safari). Вот несколько решений этой проблемы.

Решение 1: -webkit-fill-available

Решение 2. Медиа-запросы CSS

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Решение 3. Баггифилл единиц на основе области просмотра

Вы можете заставить единицы на основе области просмотра (vh | vw | vmin | vmax) правильно работать в Mobile Safari с помощью баггифилла единиц на основе области просмотра. Баггифилл выполняет итерацию по всем определенным стилям, известным документу, и извлекает те, которые используют единицы на основе области просмотра. После сопоставления относительных единиц с размерами области просмотра CSS объединяется и вводится в документ в виде элемента <style>.

Решение 4. Таргетинг innerHeight с помощью Javascript

Попробуйте установить высоту страницы (используя javascript) с помощью свойства window.innerheight.

Автор: Ronalds Vilcins

Источник: https://medium.com

Редакция: Команда webformyself.

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.